esball客户端手机下载
  咨询电话:15536038692

esball官网手机版世博

使用elementUI的时候,使用Upload 上传的时候,使用 list-type 属性来设置文件列表的样式,before-upload方法失效

最近在做项目的时候,使用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 ></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)用来构建文件对象

 

, 1, 0, 9);