el-upload上传图片不使用action属性

Posted 2020-11-30 reround

<el-upload
   action="#"
   ref="upload"
   list-type="picture-card"    //照片墙的样式
   :on-change="handleChange"
   :http-request="httpRequest"
   :before-upload="beforeAvatarUpload">
   <i class="el-icon-plus"></i>
</el-upload>

注：不使用action属性就设置为#，然后自定义上传http-request，element文档里有。action属性不能去掉

根据个人需求，我这里只要一张，每次选择就会把前一张删除

handleChange(file, fileList) {
   if (fileList.length > 1) {
       fileList.shift()
   }
},

   这里也可以对上传的图片做一些限制

 

beforeAvatarUpload(file) {
   const isImg = file.size / 1024 / 1024 < 2
   if (!isImg) {
      this.$message.error(‘上传头像图片大小不能超过 2MB!‘)
   }
    
   const isType = file.type === "image/png"
   const isType2 = file.type === "image/jpeg"

   if (!isType && !isType2) {
     this.$message.error(‘上传头像图片格式为png或jpg‘)
   }
   return (isType || isType2) && isImg
},

 

  然后就是自定义的上传方法

httpRequest(data) {
  let _this = this  // 这里要转一下是因为在下面的function里 this的指向发生了变化
  let rd = new FileReader()
  let file = data.file
  rd.readAsDataURL(file)
  rd.onloadend = function(e) {
     _this.addData.icon = this.result
  }
},
（_this.addData.icon 是新增的时候图片的参数字段，this.result就是选中的图片转成的base64）

  最后清空el-upload

this.$refs.upload.clearFiles();