最近在做项目的时候，使用elementUI的时候，使用Upload 上传的时候，before-upload方法失效。
情况下：使用 list-type 属性来设置文件列表的样式。
最终的优化之后：（演示的是修改）
需求：
1、已经提交的附件不可删除，新上传的附件可以删除
2、图片附件不能上传其他格式的文件，一次可以多张上传图片，最多上传3张，最大不超过2M
3、文件附件不能上传除了图片格式以外的格式，一次可以上传多个文件，最多上传3个文件，最大不超过2M
4、手动上传文件
一、使用on-change方法来模拟before-upload方法来判断文件类型或大小
查找了资料发现还是不行，只能求助大佬们？
<el-form-item prop="image" label="图片附件上传"> <el-upload ref="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); } },
