首页 > 技术文章 > vue+elemnt-ui 实现upload内部传参

2001- 2020-06-19 16:15 原文

<el-form-item label="图片" prop="imageUrl">
          <el-upload
            ref="upload"
            class="upload-demo"
            style="width: 100%"
            drag
            action="#"
            :http-request="upload"
            :on-change="handlChange"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="form.imageUrl" :src="form.imageUrl" style="height: 178px;width: 359px" />
            <div v-else>
              <i class="el-icon-upload" />
              <div class="el-upload__text">
                将文件拖到此处,或
                <em>点击上传</em>
              </div>
            </div>
          </el-upload>
        </el-form-item>

 JS:

    upload(data) { // 上传图片
      const _this = this
      const reader = new FileReader()
      let imageData = null
      let imageName = data.file.name
      reader.readAsDataURL(data.file)
      reader.onload = function(e) {
        imageData = this.result.replace(/^data:image\/\w+;base64,/, '') // base64编码
        const uploadData = { // 图片数据处理
          imageData,
          imageName,
          imageSourceType: 'hsh-icore-hczlife-life-admin-h5'
        }
        if (_this.imageStatus) {
          _this.FLOATUPLOAD_ACTION({ ...uploadData }).then(res => {
            if (res.code === 0) {
              _this.$message({message: '上传成功', type: 'success'})
              _this.form.imageUrl = res.data
            } else {
              _this.$message.error('上传失败,请稍后再试')
            }
          }).catch(e => {
            _this.$message.error(`${e.msg || e.message}`)
          })
        }
      }
    },
    // 图标文件格式检查
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isGIF = file.type === 'image/gif'
      // const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG && !isGIF && !isBMP) {
        this.$message.error('上传图片只能是".jpg", ".jpeg", ".png", ".gif"格式!')
        this.imageStatus = false
      } else {
        this.imageStatus = true
        return
      }
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 2MB!');
      // }
      // return isJPG && isLt2M;
    },
    handlChange(file, fileList) {
      if (fileList.length > 1) {
        fileList.splice(0, 1)
      }
    },

  以上是在做的项目中对图片接口进行内部传参的处理,已实现功能。

 

推荐阅读