js将项目中的图片上传到服务器

9月前作者：河马开源分类：Toy博客阅读(58) 违法举报

这篇具有很好参考价值的文章主要介绍了js将项目中的图片上传到服务器。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

项目上有时候会有奇怪的需求，比如前端有一些示例，想点击按钮就能上传图片，而这个图片是在前端的项目中的，如果不上传吧，又获取不到一些业务数据的id，但后端又不想为这块功能做特殊的处理，这时想通过前端直接上传到后端，需要file对象才可以。

这个时候我们需要将img转换成file对象，所以我们可以通过fetch转换成file对象然后上传，思路就是直接import 目录中的图，这样即便是打包了图片名加了hash也不会有问题，然后就是通过fecth读取到图，然后转换成file，将file放到ForData表单中，然后直接调用文件上传接口就可以了，代码如下：文章来源地址https://www.toymoban.com/news/detail-656792.html

  //项目中的demo图片
  import demo1Img from '../../assets/img/demo1.png'
  //fetch读取图片
  fetch(demo1Img)
    .then(

到了这里，关于js将项目中的图片上传到服务器的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

前后端服务器分离时，前端如何上传图片到前端服务器？

当前后端服务器分离时，前端上传图片到前端服务器可以采用以下几种方式： 1. 直接上传到前端服务器：可以通过使用HTML的`input type=\\\"file\\\"`元素，让用户选择图片文件并直接上传到前端服务器。前端服务器可以使用后端提供的API接口处理上传请求，然后将图片保存到前端服务

2024年04月27日
浏览(49)
layui选择多张图片上传多图上传到服务器保存

多图上传在一些特殊的需求中我们经常会遇到，其实多图上传的原理大家都有各自的见解。对于Layui多图上传和我之前所说的通过js获取文本框中的文件数组遍历提交的原理一样，只不过是Layui中的upload.render方法已经帮我们封装好了，我们只管调用即可，也就是说你选中了几张

2024年02月16日
浏览(39)
UE4-上传图片到服务器

由于 VaRest 插件无法满足我们上传表单的需求，在这里需要使用其他库方法。优点： httplib 库是一个以 C++11 特性编写的库，所以编译器也需要能支持 C++11 的。库在使用时只需包含一个头文件即可，非常方便。缺点：此库为线程阻塞，使用时还请注意。由于上传图片需要提

2024年02月07日
浏览(45)
13、微信小程序：上传图片到服务器

1、上传图片到服务器，有两个步骤： 1.1 拿到可上传的图片 wx.chooseImage 1.2 将图片上传到服务器 wx.uploadFile 2、代码实现 button bindtap=\\\"upload\\\"点击上传/button image src=\\\"{{imgPath}}\\\" mode=\\\"\\\"/

2024年02月12日
浏览(50)
vue2使用 tinymce富文本编辑器-图片上传、粘贴图片上传致服务器

1.安装tinymce富文本编辑器插件 npm i tinymce npm i @tinymce/tinymce-vue 2.创建Editor.js文件封装组件以便使用 3.汉化包（我放在public/tynymce/langs文件夹里） 4.vue组件中使用本次记录重点在于上传图片方法需要区分工具栏中图片上传方法以及粘贴进去的图片也需要走上传方法。两个方

2024年02月09日
浏览(62)
Unity向Web服务器上传和下载图片

Unity的WWW不但能上传下载文本形式的数据，还可以上传下载图片，不过在传输过程中，图片的信息需要转为文本格式。在上传的这段代码中，我们使用EncodeToPNG函数将图片转出为byte数组，使用WWWForm的方式上传到Web服务器上，与之前不同的是，这一次上传的PNG格式的图片。当上

2024年02月03日
浏览(50)
Vue中实现图片上传，上传后的图片回显，存储图片到服务器【使用对象存储OSS】

前言以下只提供一种思路，对新手可能不太友好。这里将前端Vue上传的图片直接存储到服务器上， Alibaba Cloud OSS : 阿里云对象存储服务（Object Storage Service，简称 OSS），是阿里云提供的海量、安全、低成本、高可靠的云存储服务。您可以在任何应用、任何时间、任何地点存储

2024年02月06日
浏览(69)
js获得相对路径文件，并上传到服务器

已知一个相对路径文件，如何使用js将该文件读取为File格式，最后上传到服务器中呢。代码结果 File() 构造器创建新的 File 对象实例(文件对象) 语法参数 bits 一个包含 ArrayBuffer ， ArrayBufferView ， Blob ，或者 DOMString 对象的 Array — 或者任何这些对象的组合。这是 UTF-8 编码的文

2024年01月20日
浏览(46)
速盾：服务器接入CDN后上传图片失败的解决方案

本文将探讨当服务器接入CDN后，上传图片失败的常见原因，并提供解决方案以解决这些问题。同时，我们还将附上一些相关的问题和解答，让读者更好地理解和应对这些挑战。随着互联网的持续发展，网站的性能和速度对于用户体验变得至关重要。为了提高网站的可访问性

2024年01月24日
浏览(65)
Vue中实现图片黏贴上传到服务器：功能分析和实现

主要的知识点是，浏览的 paste 事件， clipboardData 。 paste 一个标准的Dom事件，粘贴事件，会在用户按下 Ctrl+v ,或者通过鼠标复制时触发.像其他事件一样，我们可以通过 addEventListener 为一个 Element 添加一个粘贴事件的监听函数如以下代码。我使用vue3，在页面初始化的时候，

2024年02月15日
浏览(36)