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

Live&&learn2024-03-31 21:36

图片文件上传失败

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

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：纯文本格式