element ui 上传图片(格式，大小，尺寸) (二次无法上传问题) 完整

最新推荐文章于 2023-02-24 14:42:17 发布

唱歌去旅行8

最新推荐文章于 2023-02-24 14:42:17 发布

阅读量469

点赞数

分类专栏： vue 文章标签： upload vue elementui

本文链接：https://blog.csdn.net/baidu_16839249/article/details/115699503

版权

vue 专栏收录该内容

7 篇文章

订阅专栏

本文详细阐述了如何使用Element UI实现图片上传，包括文件类型、大小限制，以及解决上传后无法再次上传的问题，通过clearFiles方法清空缓存并提供尺寸校验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element ui 上传图片(格式，大小，尺寸) (二次无法上传问题) 完整

<el-upload
	ref="upload"
	class="avatar-uploader"
	:action="action"
	:limit="1"
	:show-file-list="false"
	:before-upload="beforeAvatarUpload"
	:on-success="handleAvatarSuccess"
	:headers="{ accessToken: token }">
		<img v-if="imageUrl" :src="imageUrl" class="avatar" />
		<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

    handleAvatarSuccess(res, file, fileList) {
      // 解决上传文件只能上传一次 ，第二次后无反应的问题的坑（浏览器还保存着我们已经上传的文件）
      this.$refs.upload.clearFiles()
      this.imageUrl = res.data
    },
  
    beforeAvatarUpload(file) {
      const isTypeTrue = /^image\/(jpeg|png|jpg)$/.test(file.type);
      const isLt2M = file.size / 1024 / 1024 < 2
      if(!isTypeTrue) {
        this.$message.error('请上传指定格式图片')
      }
      if (!isLt2M) {
        this.$message.error('请上传大小在2M内的图片')
      }
      // 限制尺寸
      let _this = this
      const isSize = new Promise(function (resolve, reject) {
        let width = this.width // 限制图片尺寸
        let height = this.height
        // URL对象是硬盘（SD卡等）指向文件的一个路径
        let _URL = window.URL || window.webkitURL
        let img = new Image()
        //设置src才能取到图片宽高等属性
        img.src = _URL.createObjectURL(file)
        img.onload = function () {
          let valid = img.width === width && img.height === height
          valid ? resolve() : reject()
        }
      }).then(() => {
        return file
      }, () => {
        _this.$message.error(`上传图片与要求尺寸不符,请重新上传`)
        return Promise.reject()
      });
      return isTypeTrue && isLt2M && isSize
    },