使用elementUI的时候,使用Upload 上传的时候,before-upload方法失效
最近在做项目的时候,使用elementUI的时候,使用Upload 上传的时候,before-upload方法失效。
最终的优化之后:(演示的是修改单子)
需求:
1、已经提交的附件不可删除,新上传的附件可以删除
2、图片附件不能上传其他格式的文件,一次可以多张上传图片,最多上传3张,最大不超过2M
3、文件附件不能上传除了图片格式以外的格式,一次可以上传多个文件,最多上传3个文件,最大不超过2M
查找了资料发现还是不行,只能求助大佬们?
<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);
}
},
文件附件的方法跟这个类似,改一下方法名就行
标签云
友情链接 申请友情链接
- 东方财富
- saucxs博客园
- weekly周报
- loveBook
- 前端博客
- 技术交流学习社区
- saucxs
- segmentfault
- saucxs的博客
- haorooms
- luckyscript
- 东方财富期货
- 峰云就她了
- binlive
- songEagle
- 且听风吟
- (TX)Heying Ye
- CG Online Judge
- Chris's Blog
- vueRouter
- 龙恩0707
- 鑫空间,鑫生活
- 木易杨
- MDN-js
- Cherry's Blog
- InterviewMap
- 安安哥的小戏台
- xiaojun1994-cat
- JavaScript-Garden
- junruchen-daily
- 秋天爱美丽
- web-summary-daily
- w3cplus-tb
- 潜行者m
- 于江水
- KieSun-git
- cnodejs
- aerminBlog
- fex_bd
- gwuhaolin-git
- Deboy's Blog
- react-china
- react.docschina
- Vuejs社区
- vuejsDoc
- cdnSocketIo
- shuaihuaCC
- colorize
- stazhu
- 前端学习
- IBM Dev社区
- linux运维笔记
- webpackDoc
- sayskyGithub
- 前端里
- 996.ICU
- electronjs
- CS-Notes
- mqyqingfengBlog
- beego官方
- 编码规范
- 阮一峰个人网站
- sessionstack
- damonareGoUp
- 咀嚼之味
- fe-interview
- xd-tayde/blog
- css-tricks
- ghmagical个人中心
- markyunp6
- hellogithub
- 霜序廿
- rin部落
- 建站素材
- 前端资源网
- CSS开发手册
- web技术交流
- 程新松个人网站
- wangEditor
- 小松博客
- 交流学习社区