文件上传失败原因分析与解决

图片文件上传失败

问题描述:在前端开发时,需要通过表单元素上传图片或其他文本,但是上传不成功,后端接口也没问题

html 复制代码
```html
<!--onChange用来绑定数据   handleUpload用来提交数据-->
      <form onSubmit={handleUpload}>
        <input type="file" onChange={handleFileChange} />
        <button type="submit" style={{ width: "100px" }} className="btn">
          图片上传
        </button>
      </form>
```
javascript 复制代码
//注意封装axios时记得修改axios的请求头对应的content-type:
//axios.default.......
const handleUpload = (event) => {
    event.preventDefault();
    // 记得使用FormData
    const file = new FormData();
    file.append("file", selectedFile);
    axios({
      method: "post",
      url: "后端接口",
      data: file,
    }).then((res) => {
      if (res.data.status == 200) {
        message.success("上传成功");
      }
    });
  };

报错内容 :Current request is not a multipart request

原因分析 :Http请求中的头部信息(header),content-type内容不对应,修改为multipart/form-data即可

扩展

json 复制代码
//Content-Type 是 什么?
HTTP 协议中的一个请求头或响应头字段,用于指示发送或接收的实体的媒体类型,告诉服务器或客户端如何解析和处理请求或响应的主体部分。
//常用的content-type有哪些?
application/json:表示json 数据  
multipart/form-data: 生成边界来分割字段,支持文件上传的格式。
application/x-www-form-urlencoded :HTTP 会将请求参数用 key1=val1&key2=val2 的方式拼接,并放到请求实体里面,不支持文件,一般用于表单提交。  
text/plain:纯文本格式
相关推荐
知识分享小能手1 天前
React学习教程,从入门到精通,React AJAX 语法知识点与案例详解(18)
前端·javascript·vue.js·学习·react.js·ajax·vue3
UrbanJazzerati1 天前
掌握 DOM 的基础属性与方法:从操作元素到构建动态效果
前端·面试
hashiqimiya1 天前
html实现右上角有个图标,鼠标移动到该位置出现手型,点击会弹出登录窗口。
前端·html
古夕1 天前
前端文件下载的三种方式:a标签、Blob、ArrayBuffer
前端·javascript·vue.js
纯真时光1 天前
Vue3中pinia状态管理库的使用(Composition API 风格)
前端
李李记1 天前
Node.js 打包踩坑?NCC+PKG 从单文件到多平台可执行文件,解决 axios 缺失等 80% 问题
javascript
万少1 天前
可可图片编辑 HarmonyOS(5)滤镜效果
前端
Yvonne爱编码1 天前
后端编程开发路径:从入门到精通的系统性探索
java·前端·后端·python·sql·go
GIS之路1 天前
GDAL 读取遥感影像数据
前端
wow_DG1 天前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(九):Vue2 性能优化
javascript·vue.js·性能优化