Vue使用el-upload文件(图片)上传

1.一般的整体流程就是：咱们选择一个文件点击确定上传后，会上传到服务器（action），这时候服务器会返回给我们一个url（在on-success回调中可以拿到），接下来就是在提交表单的时候将该url传给后端就可以了。

2.但是项目中图片比较的少的时候，服务器可能没有专门存照片的地方，他们会直接存图片，也就是存图片的二进制对象base64编码，然后返回的时候也是返回给前端blob对象

1. 服务器有专门存图片的地方，返回给我们一个路径

<el-form-item label="视频上传" prop="" :rules="[]">
  <el-upload
    class="upload-demo"
    :action="`${this.$http.BASE_URL}/sys/file/webupload/upload?uploadPath=/iot/labor/labourSafeTrain`"
    :on-success="uploadSuccess"
    :before-upload="beforeAvatarUpload"
    :show-file-list="true"
    :limit='1'
    :file-list="videofileList"
  >
    <el-button size="small" type="primary">点击上传</el-button>
    <!-- <div slot="tip" class="el-upload__tip">
      只允许导入“xls”或“xlsx”格式文件！
    </div> -->
  </el-upload>
</el-form-item>

// 上传之前的回调
beforeAvatarUpload(file) {
  const isLt50M = file.size / 1024 / 1024 < 50;
  //const isJPG = fileType === 'image/jpg' || fileType === 'image/jpeg' || fileType === 'image/png'
  if (['video/mp4', 'video/ogg','video/flv','video/avi','video/wmv','video/rmvb'].indexOf(file.type) == -1) {
    this.$message.error('上传视频只能是 mp4、ogg、flv、avi、wmv、rmvb 格式!');
    return false;
  }
  //if (!isJPG) {
  //  this.$message.error('上传图片的格式只能是 JPG或PNG 格式!')
  //  return false
  //}
  if (!isLt50M) {
    this.$message.error('上传视频大小不能超过 50MB!');
    return false;
  }
  return true;
},
// 上传成功的回调
uploadSuccess(obj,res,file) {
  if (obj.success) {
    this.$message.success({dangerouslyUseHTMLString: true,
      message: obj.msg})
    this.inputForm.url = obj.url // 后端返给我们的路径
  } else {
    this.$message.error('操作失败')
  }
},

2.服务器直接存图片的二进制 

这时候我们就用不到上面的action了，需要用到on-change事件，拿到我们上传图片的blob对象，并传给后端 。然后后端也会返回blob对象，我们通过window.URL.createObjectURL转成一个url即可回显图片，这时候注意，图片必须是单独的接口并返回二进制对象，我们在用axios请求的时候一定要将responseType设置为blob才可以。后端不可以将图片的二进制编码放在对象里面的一个字段中，这样前端将无法解析

<el-form-item label="机楼图片" prop="img" :rules="[]">
  <el-upload
    ref="my-upload"
    :class="{ 'upload-img': fileList.length }"
    action="#"
    list-type="picture-card"
    :auto-upload="false"
    :on-change="handleChange"
    :multiple="false"
    :before-upload="beforeAvatarUpload"
    :file-list="fileList"
    :limit="1"
    accept=".png, .jpg, .JPG, .JPEG, .jpeg, .PNG .GIF, .gif"
  >
    <i slot="default" class="el-icon-plus" />
    <div style="width: 100%;height: 100%;" slot="file" slot-scope="{ file }">
      <img
        style="width: 100%;height: 100%;"
        class="el-upload-list__item-thumbnail"
        :src="file.url"
        alt=""
      >
      <span class="el-upload-list__item-actions">
        <span
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
          <i class="el-icon-delete" />
        </span>
      </span>
    </div>
  </el-upload>
</el-form-item>

data() {
  return {
    inputForm: {
      id: "",
      img: '' // 机楼图片
    },
    fileList: []
  }
}

// 上传之前的回调
beforeAvatarUpload(file) {
  const fileType = file.raw.type
  const isJPG = fileType === 'image/jpg' || fileType === 'image/jpeg' || fileType === 'image/png'
  const isLt20M = file.raw.size / 1024 / 1024 < 20
  if (!isJPG) {
    this.$message.error('上传图片的格式只能是 JPG或PNG 格式!')
  }
  if (!isLt20M) {
    this.$message.error('上传图片的大小不能超过 20M!')
  }
  return isJPG && isLt20M
},
// 移除图片
handleRemove(file) {
  const index = this.fileList.indexOf(file.url)
  this.fileList.splice(index, 1)
},
// 上传图片
handleChange(file, fileList) {
  const isFileType = this.beforeAvatarUpload(file)
  // 如果文件类型不对，则清空表单及附件列表
  if (!isFileType) {
    this.fileList = []
    return
  }
  this.inputForm.img = file.raw  // 这个就是咱们上传图片的二进制对象
  this.fileList = [fileList[0]]
},