失眠网 > [js进阶]axios+FormData文件上传

[js进阶]axios+FormData文件上传

时间：2023-07-27 14:38:35

原理：FormData上传

创建一个FormData对象，将得到的文件流对象放在FormData内，然后使用axios上传

请求头设置

Content-Type（内容类型），一般是指网页中存在的 Content-Type，用于定义网络文件的类型和网页的编码，决定浏览器将以什么形式、什么编码读取这个文件，这就是经常看到一些 PHP 网页点击的结果却是下载一个文件或一张图片的原因。

Content-Type 标头告诉客户端实际返回的内容的内容类型。

语法格式：

Content-Type: text/html; charset=utf-8Content-Type: multipart/form-data; boundary=something

以application开头的媒体格式类型：

application/xhtml+xml ：XHTML格式application/xml： XML数据格式application/atom+xml ：Atom XML聚合格式application/json： JSON数据格式application/pdf：pdf格式application/msword ： Word文档格式application/octet-stream ：二进制流数据（如常见的文件下载）application/x-www-form-urlencoded ：<form encType="">中默认的encType，form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式）

另外一种常见的媒体格式是上传文件之时使用的：

multipart/form-data ：需要在表单中进行文件上传时，就需要使用该格式

headers: {'Content-Type': 'multipart/form-data' }

请求上传文件方法

export function submitTask(parameter) {return request({url: 'xxx',method: 'post',data: parameter,headers: {'Content-Type': 'multipart/form-data'}})}

上传函数中操作FormData对象

无论是用input type=“file”还是一些框架的上传组件，都可以的到一个file文件流，示例使用的是antd的Upload组件。

<a-upload-dragger:fileList='fileList'accept='.zip':beforeUpload='beforeUpload':remove='handleRemove'>

export default {data() {return {fileList: [],uploading: false,};},methods: {handleRemove(file) {const index = this.fileList.indexOf(file);const newFileList = this.fileList.slice();newFileList.splice(index, 1);this.fileList = newFileList;},beforeUpload(file) {this.fileList = [...this.fileList, file];return false;},handleUpload() {const {fileList } = this;const formData = new FormData();fileList.forEach(file => {formData.append('files[]', file);});this.uploading = true;// You can use any AJAX library you likereqwest({url: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',method: 'post',processData: false,data: formData,success: () => {this.fileList = [];this.uploading = false;this.$message.success('upload successfully.');},error: () => {this.uploading = false;this.$message.error('upload failed.');},});},} }