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

河马开源

已于 2023-08-18 11:43:59 修改

阅读量1.1k

点赞数

分类专栏：技术文章标签： javascript 服务器开发语言

于 2023-08-18 11:39:10 首次发布

本文链接：https://blog.csdn.net/rotating_windmill/article/details/132358566

版权

技术专栏收录该内容

40 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

在项目中遇到需要前端直接上传图片至服务器的需求，由于后端不愿意为此做特殊处理，本文介绍如何通过JavaScript将图片转换为File对象并使用fetch上传。通过import引入图片，确保打包后仍能正确引用，然后读取图片并转化为File，添加至FormData，最后调用上传接口完成操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

了解本专栏

超级会员免费看