使用elementUI的时候，使用Upload 上传的时候，使用 list-type 属性来设置文件列表的样式，before-upload方法失效
最近在做项目的时候，使用elementUI的时候，使用Upload 上传的时候，before-upload方法失效。情况下：使用 list-type 属性来设置文件列表的样式。最终的优化之后：（演示的是修改）需求：1、已经提交的附件不可删除，新上传的附件可以删除2、图片附件不能上传其他格式的文件，一次可以多张上传图片，最多上传3张，最大不超过2M3、文件附件不能上传除了图片格式以外的格式，一次可以上传多个文件，最多上传3个文件，最大不超过2M4、手动上传文件一、使用on-change方法来模拟before-upload方法来判断文件类型或大小查找了资料发现还是不行，只能求助大佬们？<el-form-item prop="image" label="图片附件上传"><el-uploadref="uploadImage":action="uploadAction":before-upload="beforeUploadPicture":before-remove="beforeRemovePicture":on-change="imageChange"list-type="picture-card"name="files":file-list="eventDetail.images":limit="3"multiple:auto-upload="false":on-preview="handlePictureCardPreview":on-remove="handleRemovePicture":on-exceed="handleExceedPicture"><i class="el-icon-plus"></i></el-upload><el-dialog append-to-body title="图片详情" :visible.sync="dialogVisible"><img width="100%" :src="dialogImageUrl" alt=""></el-dialog></el-form-item> 最后只能使用on-change来模拟before-upload方法的判断上传的照片或者文件的格式。//这个是before-upload方法，来判断上传文件 beforeUploadPicture(file){// console.log(file, fileList, '=============================')const isImage = file.raw.type == 'image/png' || file.raw.type == 'image/jpg' || file.raw.type == 'image/jpeg' || file.raw.type == 'image/bmp' || file.raw.type == 'image/gif' || file.raw.type == 'image/webp';const isLt2M = file.size < 1024 * 1024 * 2;if (!isImage) {this.$message.error('上传只能是png,jpg,jpeg,bmp,gif,webp格式!');}if (!isLt2M) {this.$message.error('上传图片大小不能超过 2MB!');}return isImage && isLt2M;},******然后这个方法失效，on-change方法正常。我只能使用on-change方法来******//on-change的方法 imageChange(file, fileList) {const isImage = file.raw.type == 'image/png' || file.raw.type == 'image/jpg' || file.raw.type == 'image/jpeg' || file.raw.type == 'image/bmp' || file.raw.type == 'image/gif' || file.raw.type == 'image/webp';const isLt2M = file.size < 1024 * 1024 * 2;if (!isImage) {this.$message.error('上传只能是png,jpg,jpeg,bmp,gif,webp格式!');}if (!isLt2M) {this.$message.error('上传图片大小不能超过 2MB!');}if(isImage && isLt2M){this.imageList = fileList;this.images[''] = fileList;}else{fileList.splice(-1,1);}},以上是图片附件的：使用on-change方法模拟before-upload方法，使用splice删除文件，splice方法是可以改变原始数组的，这样就模拟了上传前判断文件格式。文件附件的方法跟这个类似，改一下方法名就行 二、已经保存的文件不可删除，怎么判断思路：我本来是打算从列表中根据单子状态来判断，然后发现我新上传的文件，也删除不了，所以最后使用文件的url路径来判断是不是已经保存的，因为这是手动保存，文件路径如果不是服务器地址而是本地地址，就可以判断为这是新上传的文件，就可以删除。使用before-remove方法beforeRemovePicture(file, fileList){if(file.url.indexOf('blob') === -1){this.$message.warning('已提交的服务单的附件不能删除')return false;}}, 三、手动上传文件和附带其他参数思路：可以自己构建FormData数据，使用append方法构造一个文件对象，并且将其他参数加入到文件对象手动上传方法（构造FormData文件对象）let wfForm = new FormData();wfForm.append('orderId', this.eventDetail.orderId)wfForm.append('eventCategory', this.eventDetail.eventCategory)wfForm.append('priority', this.eventDetail.priority==null?'':this.eventDetail.priority)wfForm.append('title', this.eventDetail.title)wfForm.append('dsc', this.eventDetail.dsc==null?'':this.eventDetail.dsc)wfForm.append('occurDate', this.eventDetail.occurDate==null?'':this.eventDetail.occurDate)let attIds = ''for (let i = 0, length = this.eventDetail.files.length; i < length; i++) {attIds += this.eventDetail.files[i].attId + ',';}for (let i = 0, length = this.eventDetail.images.length; i < length; i++) {attIds += this.eventDetail.images[i].attId + ',';}attIds = attIds.substring(0, attIds.length - 1);wfForm.append('attIds', attIds);Object.entries(this.images).forEach(file => {file[1].forEach(item => {wfForm.append('file', item.raw)wfForm.append(item.name, file[0])})})Object.entries(this.files).forEach(file => {file[1].forEach(item => {wfForm.append('file', item.raw)wfForm.append(item.name, file[0])})})说明一下：1、this.images指的是新上传的图片的数组，this.files值的是新上传的文件的数组。2、Object.entries方法主要是用来遍历对象属性。3、wfForm.append('file', item.raw)用来构建文件对象
