#每天都是崭新的一天#再累也要照顾好自己
使用elementUI的时候,使用Upload 上传的时候,before-upload方法失效
发布于 作者 suning 387 次浏览 来自 vue

最近在做项目的时候,使用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聊天机器人
saucxs
hi ,欢迎来到sau交流学习社区,欢迎与我聊天,问我问题哦!
您正在使用的浏览器是,不在支持范围内!
为了您的正常使用与展示,推荐使用Chrome浏览器68以上版本
支持浏览器:
火狐浏览器最新版
Safari浏览器最新版
Edge浏览器最新版
IE浏览器10,11