今天坑了。我需要同时上传图片和文件，图片需要显示缩略图。要显示的文件列表。我的想法是：首先，只上传附件照片，看ele官方的例子，不仅上传附件照片，还要同时上传其他参数。然后上传照片和文件，上传其他参数，其实就是文件合并。1.上传照片等参数页面样式大致是这样的。参数包括优先级、发生时间、工单名称、工单描述、上传图片附件。(1)查看部分代码：确定说明：1、action变量为后台图片接口地址。2、beforeUpload方法指的是上传前触发的函数，可以用来判断前端的文件格式和文件大小。3、on-change方法是指每选择一个文件，就会触发该函数，可以用来在前端删除和添加照片。4、list-type属性是指照片名片的显示方式。5.name指的是上传文件的字段名，是后端确认文件流的字段名可以随便写6.data属性指的是上传附加的附加参数，指的是其他他的参数7，limit属性指的是上传文件数量的限制8.multiple属性表示每次可以选择多个文件。true表示多选，false表示单选。9、auto-upload属性是指自动上传。on-preview方法参考查看缩略图方法11，on-remove方法参考删除文件方法12、ref绑定dom元素（2）data部分代码data(){return{selectedCategorySpe:this.selectedCategory,serviceForm:{title:'',desc:'',priority:'',occurDate:''},dialogImageUrl:'',dialogVisible:false,uploadAction:"/inner/event/order/submit/submit"+"&accessToken="+this.$store.getters.token}},(3)计算部分代码computed:{...mapGetters(['constConfig']),paramsData:function(){letparams={eventCategory:this.selectedCategorySpe.categoryId,priority:this.serviceForm.priority,title:this.serviceForm.title,dsc:this.serviceForm.desc,occurDate:this.serviceForm.occurDate}returnparams}}，使用computed来监控paramsData的真实值此时，只要selectedCategorySpe.categoryId、serviceForm.priority、serviceForm.title、serviceForm.desc、serviceForm.occurDate中只有一处发生变化，paramsData的值就会重新计算。(4)methods部分方法beforeUploadPicture(file){constisImage=file.type=='image/png'||file.type=='图片/jpg'||file.type=='图像/jpeg'||file.type=='图像/bmp'||file.type=='图像/gif'||file.type=='image/webp';constisLt2M=file.size<1024*1024*2;if(!isImage){this.$message.error('上传只能是png,jpg,jpeg,bmp,gif,webp格式！');}if(!isLt2M){this.$message.error('上传图片大小不能超过2MB！');}returnisImage&&isLt2M;},handlePictureCardPreview(file){this.dialogImageUrl=file.url;this.dialogVisible=true;},handleRemovePicture(file,fileList){console.log(file,fileList);},imageChange(file,fileList,name){console.log(file,fileList);},confirm(){this.$refs.upload.submit();}说明：通过ref确认绑定上传，然后调用form表单的submit方法。这个vue已经封装好了，此时传递的参数可以看到post传递的文件对象。2.图片和文件同时上传，图片可以缩略图文件查看，也可以列表显示。但是当你有这样的需求时，你会被蒙蔽（1）查看部分代码点击上传OK(2)部分数据data(){return{selectedCategorySpe:this.selectedCategory,serviceForm:{title:'',desc:'',priority:'',occurDate:'',},images:{},files:{},dialogImageUrl:'',dialogVisible:false}},(3)方法部分数据beforeUploadPicture(file){constisImage=file.type=='image/png'||file.type=='image/jpg'||file.type=='image/jpeg'||file.type=='image/bmp'||file.type=='image/g如果'||file.type=='image/webp';constisLt2M=file.size<1024*1024*2;if(!isImage){this.$message.error('上传只能是png、jpg、jpeg、bmp、gif、webp格式！');}if(!isLt2M){this.$message.error('上传的图片大小不能超过2MB！');}返回isImage&&isLt2M;},handlePictureCardPreview(file){this.dialogImageUrl=file.url;this.dialogVisible=true;},handleRemovePicture(file,fileList){console.log(file,fileList);},imageChange(文件,文件列表,名称){console.log(文件,文件列表);this.imageList=文件列表；this.images['images']=fileList;},handleRemoveFile(file,fileList){console.log(file,fileList);},handlePreviewFile(文件){console.log(文件);},handleExceedFile(files,fileList){this.$message.warning(`当前限制为3个文件，本次选择${files.length}个文件，总共选择${files.length+fileList.length}文件`);},beforeRemoveFile(文件,fileList){returnthis.$confirm(`Areyousureyouwanttoremove${file.name}?`);},fileChange(file,fileList){console.log(file,fileList);this.fileList=文件列表；这。文件['文件']=文件列表；},confirm(){让wfForm=newFormData();wfForm.append('eventCategory',this.selectedCategorySpe.categoryId)wfForm.append('priority',this.serviceForm.priority)wfForm.append('title',this.serviceForm.title)wfForm.append('dsc',this.serviceForm.desc)wfForm.append('occurDate',this.serviceForm.occurDate)Object.entries(this.images).forEach(file=>{file[0].forEach(item=>{//以下内容"images"对应后端需要接收的名称，用来区分图片和文件，名称为images，就是图片wfForm.append('images',item.raw)//wfForm.append(item.name,file[0])})})Object.entries(this.files).forEach(file=>{file[0].forEach(item=>{//下面的“files”对应后端需要接收的名称，名称为files，即文件wfForm.append('files',item.raw)//wfForm.append(item.name,file[0])})})createEventOrder(wfForm).then(res=>{console.log(res,'res')if(res.retValue===1){this.$message.success('成功createdserviceorder');this.handleClose()}else{}})}解释一下，新建一个this.files存放文件列表，this.images存放图片列表在confirm新建一个FormData对象，使用append方法添加参数变量给数据对象和文件对象。最后，将FormData对象传递给后端。传参截图如下：这次区分图片和文件，图片和文件，后台也需要做判断。其他不需要参数的参数可以选择不传，需要添加新的参数，使用append方法添加。2019.07.11【解释】根据评论中提到的问题，this.files['']=fileList;没有多大意义。这是用一个对象来存储那个文件对象。该对象需要一个名称。自己拿一个，也可以自己创建为null。也可以将其更改为：this.files['files']=fileList;这样做的目的是，如果你使用一个this.fileImage对象进行文件上传和图片上传，在最后包裹formData的时候可以通过对象的名字来区分，哪个是文件，哪个是图片，就可以了将formData用Object.entries(this.images).forEach包裹一次，比较符合前端高复用低代码的思想。这里怕有些人看不懂，所以还是加了代码：(2)数据的data部分(加一个fileImage)fileImage:{},(3)在方法1中修改这个，修改图片上传到if(isImage&&isLt2M){this.imageList=fileList;this.fileImage['images']=fileList;}else{fileList.splice(-1,1);}2.将文件上传改为if(!isImage&&isLt2M){this.fileList=fileList;this.fileImage['files']=fileList;}else{fileList.splice(-1,1);}3.提交那块，把两个forEach合二为一，然后直接取对象的名字就是名字的形式数据。Object.entries(this.fileImage).forEach(file=>{file[1].forEach(item=>{wfForm.append(file[0],item.raw)})})最后也可以看到，太好了【欢迎关注，有什么问题欢迎提问，我看到时间会回复】
