【vue+elementUI】重写文件上传方法

【vue+elementUI】重写文件上传方法

<template>
<div>
  <el-upload
    action="upload"
    :http-request="handleUploadFile"
    ref="upload
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
    accept=".png,.jpg,.jpeg"
    class="el-form-item">
    <i class="el-icon-plus"></i>
  </el-upload>
  <el-dialog :visible.sync="dialogVisible">
    <img width="100%" :src="pictureList" alt="">
  </el-dialog>
</div>
</template>

<script>
export default {
  data () {
    return {
      pircturList = [], //图片列表
      dialogVisible = false
    }
  },
  methods: {
    // 重写文件上传方法
    handleUploadFile (params) {
      const that = this
      const _file = params.file
      const isLt2M = _file.size / 1024 / 1024 < 2
      const api = '/api/upload'

      let param = new FormData()
      param.append('file', _file)

      if (!isLt2M) {
        that.$message.error('请上传2M以下的图片文件(*.png/*.jpg/*.jpeg)')
        return false
      }
      
      that.$api.post(api, param, r => {
        // code
        console.log(r)
      })
    },

    // 删除图片
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },

    // 预览图片
    handlePictureCardPreview (file) {
      this.RFQData.certList = file.url
      this.dialogVisible = true
    },
  }
}
</script>