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

图片文件上传失败

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

```html
<!--onChange用来绑定数据   handleUpload用来提交数据--><form onSubmit={handleUpload}><input type="file" onChange={handleFileChange} /><button type="submit" style={{ width: "100px" }} className="btn">图片上传</button></form>
```

//注意封装axios时记得修改axios的请求头对应的content-type:
//axios.default.......
const handleUpload = (event) => {event.preventDefault();// 记得使用FormDataconst 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即可
在这里插入图片描述
扩展：

//Content-Type 是 什么？
HTTP 协议中的一个请求头或响应头字段，用于指示发送或接收的实体的媒体类型，告诉服务器或客户端如何解析和处理请求或响应的主体部分。
//常用的content-type有哪些？
application/json：表示json 数据  
multipart/form-data： 生成边界来分割字段，支持文件上传的格式。
application/x-www-form-urlencoded ：HTTP 会将请求参数用 key1=val1&key2=val2 的方式拼接，并放到请求实体里面，不支持文件，一般用于表单提交。  
text/plain：纯文本格式