Element-ui el-upload文件上传

element-ui 文件及图片上传功能

<el-upload
  class="upload-demo"
  auto-upload
  :show-file-list="false"
  :action="uploadUrl"
  name="pic"
  :before-upload="beforeUpload"
  :on-success="uploadSuccess">
  <span class="refresh">上传</span>
</el-upload>

 beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      
      if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
         this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
 }

 uploadSuccess(res, file) {
    const _this = this;
    if(res.success === false){
      _this.$message({
        message:res.desc,
        type:'warning'
      })
    } else {
      this.qrcodeImgSrc = URL.createObjectURL(file.raw);
      this.imageUrl = file.response.data
    }
    
  }
  

下面对以上参数进行解释：（附上element-ui官网: http://element-cn.eleme.io/2.3/#/zh-CN/component/upload）

  auto-upload  文件添加后自动上传

 :show-file-list="false"    不显示文件列表

   uploadUrl 绑定后台请求地址

   name 为后台所需参数，如图片pic、文件file，具体由后台决定

回调方法

before-upload：上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。

这里可以根据回调的参数来限制上传的文件类型及大小

on-success：文件上传成功时的钩子。

方法回调的response为后台请求返回的参数，file返回一个文件流（注：返回的文件流有过期时间限制）