ant design vue 组件中的自定图片上传

经过两个vue项目，分享一下图片上传这里的写法和注意点

1.只传一个文件信息过去时

//HTML
大小不能超过2M上传
//JS// 事件: 上传文件之前beforeUpload (file, fileList) {// 显示错误提示(防抖处理)const showErrorMsg = debounce(this.$message.error, 20)// 验证文件大小const isLt1M = file.size / 1024 / 1024 < 2if (!isLt1M) {showErrorMsg('文件大小不能超出2MB')return false}// 验证文件上传数量if (fileList.length > 5) {showErrorMsg('一次上传的文件数量不能超出5个')return false}return true},/*** 事件: 自定义上传事件*/onUpload (info) {this.isLoading = true// 记录上传状态this.uploading.push(true)// 构建上传参数var formData = new FormData()formData.append('file', info.file)this.$http.post("/file/upload", formData).then((res) => {// console.log("文件上传成功", res);this.$message.success(res.msg);if (res.code == 1) {// 存入列表this.fileList.push({uid: this.fileList.length + 1,name: res.data.name,status: "done",url: res.data.filePath,});} else {this.$message.error(res.msg);}}).catch(function (error) {console.log(error);});},

以上图片上传，后端只要求传送图片信息即可（二进制），所以在vue的拦截里面进行-Type修改

// 添加请求拦截器
axios.interceptors.request.use((config) => {// 每次发起请求前取消掉在进行中的相同请求removePending(config);config.cancelToken = new cancelToken((c) => {// 这里的ajax标识我是用请求地址&请求方式拼接的字符串，当然你可以选择其他的一些方式pending.push({ u: config.url + "&" + config.method, f: c });});if (config.url == "/file/upload") {config.headers["Content-Type"] = "multipart/form-data";}return config;},(error) => {message.error("请求超时");return Promise.reject(error);}
);

观察控制台网络请求位置可看到一下内容，注意红圈和篮圈部分都有的

2.第二次项目中遇到，要求传文件上传token和file

起初是把只把file 自己添加到()对象中了，把放在了外面，结果报错了。正确的写法就是，一起添加到中去。这是一个经验问题，还好是蒙对了。

formData.append('file', info.file)
formData.append('upload_token', res)