antdv vue upload自定义上传结合表单提交方式_vue.js_

{ file: { /* ... */ }, fileList: [ /* ... */ ] } 

上传

setFileList(fileKey) { // 根据filekey值清空指定的上传文件列表 this[`${fileKey}List`] = []; // 清除对应的表单组件值 this.lastForm.setFieldsValue({ [fileKey]: "" }); }, handleChange({ file, fileList }, key) { if (file.status === "removed" || file.status === "error") { // 当这两种状态时调用setFileList方法 this.setFileList(key); return ""; } // 给对应的上传组件文件列表赋值 this[`${key}List`] = fileList; // 赋值给对应表单 return file; } 

uploadRequest(param) .then(({ success, message, data }) => { if (success) { const { fileName, filePath } = data; this.fileData[`${fileKey}Path`] = filePath; this.fileData[`${fileKey}Name`] = fileName; this.$message.success(message); // 上传成功将状态设置为 done file.onSuccess(); } else { this.$message.warning(message); // 上传成功将状态设置为 error file.onError(); } }) .catch(error => { this.$message.error("上传失败！"); console.log("上传失败：", error); // 上传成功将状态设置为 error file.onError(); }); 

 上传附件 

customRequest(data) { const formData = new FormData() formData.append('files', data.file) formData.append('type', 3) // 这里的token根据自身情况修改 // formData.append('token', 'dfjdgfdgskdfkaslfdskf') this.saveFile(formData) }, saveFile(data) { axios({ method: 'post', url: this.$rootUrl+'BillAudit/BillFile/UploadFile', data: data }).then(res=>{ let fileList = JSON.parse(JSON.stringify(this.fileList)) if(res.data.code == 1) { fileList.map(file=>{ file.url = res.data.data file.status = 'done' }) this.$message.success('上传成功') }else { fileList.map(file=>{ file.status = 'error' }) this.$message.error(res.data.message) } this.fileList = fileList }).catch(err=>{ let fileList = JSON.parse(JSON.stringify(this.fileList)) fileList.map(file=>{ file.status = 'error' }) this.fileList = fileList this.$message.error('服务器内部错误') }) },