element上传，限制大小，尺寸，文件/图片格式

最新推荐文章于 2024-08-07 13:51:42 发布

wzx_yyzc_wdnf

最新推荐文章于 2024-08-07 13:51:42 发布

阅读量1.9k

点赞数 3

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/wzx_yyzc_wdnf/article/details/127968752

版权

<el-form-item label="链接封面" prop="link_cover">
        <div class="upload">
          <el-upload
            class="avatar-uploader"
            :action="uploadHost"
            :data="uploadData"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :on-error="handleError"
            :on-remove="handleRemove"
            :before-upload="beforeUpload"
            :accept="accept"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
          <div>
            <p>图片尺寸要求150*150</p>
            <p>最大上传2M大小图片</p>
            <p>图片仅支持jpg、jpeg、png图片格式</p>
          </div>
        </div>
      </el-form-item>

data() {
    return {
      imageUrl: '',
      assistantList: [],
      showTagDialog: false,
      selectedTag: [],
      uploadHost: 'https://pysy-jzbimage-1252161091.cos.ap-beijing.myqcloud.com',
      // uploadHost: 'https://jzbimage.oss-cn-beijing.aliyuncs.com',
      accept: '.jpg,.jpeg,.png,',
      uploadData: {}//上传data(必传)
    }
  },
methods: {
    // 图片限制尺寸
    limitImgSize(file) {
      const _URL = window.URL || window.webkitURL
      const isSize = new Promise((resolve, reject) => {
        const img = new Image()
        img.onload = () => {
          const valid = img.width === 150 && img.height === 150
          valid ? resolve() : reject()
        }
        img.src = _URL.createObjectURL(file)
      }).then(
        () => {
          return true
        },
        () => {
          this.$message.error('请上传尺寸为150x150的图片！')
          return false
        }
      )
      return isSize
    },

    async stopUpload(file) {
      const arr = file.name.split('.')
      const type = arr[arr.length - 1]
      this.uploadData = await getSignature(type, file.name)
    },
    // 上传图片
    async beforeUpload(file) {
      const isJPEG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isJPG = file.type === 'image/jpg'
      if (file.size > 1024 * 1024 * 2) {
        this.$message.warning('文件不符合规则（图片大小不超过 2M），请重新上传~')
        return
      }
      if (!isJPG && !isPNG && !isJPEG) {
        this.$message.error('上传图片只能是jpg，png，jpeg格式!')
        return false
      }
      const res = await this.limitImgSize(file)
      if (res === false) {
        return false
      }

      const arr = file.name.split('.')
      const type = arr[arr.length - 1]
      this.uploadData = await getSignature(type, file.name)
    },

    handleAvatarSuccess(res, file) {
      this.imageUrl = `${this.uploadHost}/${this.uploadData.key}`
      this.form.link_cover = `${this.uploadHost}/${this.uploadData.key}`
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },

    // 取消弹窗
    handleClose () {
      this.$emit('close')
    },

    // 确认
    handleConfirm () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log(valid, this.form, 'formlist')
          this.$emit('close', this.form, true)
        }
      })
    },
    handleError: function(e, file, fileList) {
      if (file.status === 'fail') {
        this.$message.warning('上传失败，请重试')
      }
      this.disableUpload = false
    }
  }