element ui 之 el-upload自定义上传方法

迷南。 2022-12-22 06:24 303阅读 0赞

**使用http-request 指令实现自定义上传, 使用该指令, on-success, on-error 指令是不会触发的**  
直接上代码

<el-upload
      drag
      ref="upload"
      :action="action"
      class="upload-demo"
      :http-request="UploadFile"
      :on-change="fileChange"
      :file-list="fileList"
      accept="image/jpeg,image/png,image/jpg"
      :before-upload="onBeforeUploadImage"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>

*  before-upload 上传文件之前的钩子
 *  action 可以使用普通字符串代替，没有什么意义，但不建议删除，因为我们使用http-request 这个指令
 *  http-request 自定义request请求
 *  on-change 上传文件改变时候触发的方法

data() { 
        fileList: [],
        logo: '',
    }
    methods: { 
        onBeforeUploadImage(file) { 
          const isIMAGE = file.type === 'image/jpeg' || 'image/jpg' || 'image/png'
          const isLt1M = file.size / 1024 / 1024 < 1
          if (!isIMAGE) { 
            this.$message.error('上传文件只能是图片格式!')
          }
          if (!isLt1M) { 
            this.$message.error('上传文件大小不能超过 1MB!')
          }
          return isIMAGE && isLt1M
        },
        UploadImage(param){ 
          const formData = new FormData()
          formData.append('file', param.file)
          formData.append('overwrite', false)
          this.$http
            .post('/hf/api/fileupload', formData, { 
              headers: {  'Content-Type': 'multipart/form-data' }
            })
            .then(res => { 
              res = res.data
              if (res.code == 0){ 
              	this.$message.info('文件上传成功')
              } else { 
                this.$message.info('文件上传失败')
              }
            })
        },
        fileChange(file){ 
         /** * 1. 清除文件对象 * 2. 取出上传文件的对象,在其它地方也可以使用 * 3. 重新手动赋值filstList,免得自定义上传成功了,而fileList并没有动态改变,这样每次都是上传一个对象 * */
          this.$refs.upload.clearFiles()
          this.logo = file.raw
          this.fileList = [{  name: file.name, url: file.url }]
        },
    }