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

图片文件上传失败

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

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:纯文本格式
相关推荐
ekskef_sef1 小时前
32岁前端干了8年,是继续做前端开发,还是转其它工作
前端
sunshine6411 小时前
【CSS】实现tag选中对钩样式
前端·css·css3
真滴book理喻2 小时前
Vue(四)
前端·javascript·vue.js
蜜獾云2 小时前
npm淘宝镜像
前端·npm·node.js
dz88i82 小时前
修改npm镜像源
前端·npm·node.js
Jiaberrr2 小时前
解锁 GitBook 的奥秘:从入门到精通之旅
前端·gitbook
程序员_三木2 小时前
Three.js入门-Raycaster鼠标拾取详解与应用
开发语言·javascript·计算机外设·webgl·three.js
顾平安3 小时前
Promise/A+ 规范 - 中文版本
前端
聚名网3 小时前
域名和服务器是什么?域名和服务器是什么关系?
服务器·前端
桃园码工3 小时前
4-Gin HTML 模板渲染 --[Gin 框架入门精讲与实战案例]
前端·html·gin·模板渲染