vue2 element-ui 的 upload 组件手动上传

vue2 element-ui 的 upload 组件手动上传

背景：官方给的手动上传需要定义其它按钮在额外多一步操作，其实想 upload 上传文件后直接走自定义方法，每次都调试半天才可以使用。

这里记录下，下次在碰到 element-ui 手动上传直接使用，这里只记录关于手动上传的必要属性， 其它属性参考element-ui文档。

【element-ui 官方文档】

代码如下：

 //template 模板里面定义按钮
 <el-upload
    action="#"
    ref="uploadRef"
    :http-request="customRequest"
    :on-success="handleFileSuccess"
    :show-file-list="false"
 >
    <el-button size="mini">上传密码字典</el-button>
 </el-upload>

 //js methods 里面定义的方法

  handleFileSuccess() {
    if(this.$refs?.uploadRef){
      this.$refs?.uploadRef.submit()
    }
  }

  customRequest(param) {
    const file = param.file
    //拿到文件自定义自己的要怎么处理逻辑
    //列举下面两种场景

    //读取文件内容
    this.getFileRes(file)

    //调用后台接口
    this.customFetch(file)
  }

  //创建文件读取器，读取文件内容
  getFileRes(file) {
    const reader = new FileReader()

    reader.onload = () => {
      //处理文件结果逻辑
      console.log(reader.result)
    }

    reader.readAsText(file)
  }


  //自定义上传接口参数
  async customFetch(file) {
    const formData = new FormData();
    formData.append('file', file);
    // 可以在这里添加其他参数
    formData.append('other', "xxx");

    axios.post("url", formData)
      .then(response => {
        //上传成功
      })
      .catch(error => {
        //上传失败
      });
  }

upload 属性
action：上传的地址
ref：组件的实例
http-request：覆盖默认的上传行为，可以自定义上传的实现
on-success：文件上传成功时的钩子
show-file-list：是否显示已上传文件列表

总结：上述代码中

• 使用了 http-request 属性来指定自定义的上传函数 customRequest。
• 我们在文件上传成功时，调用组件 upload 的 submit 方法，从而触发 httpRequest 方法，实现手动上传。

有疑问的同学可以私信我、对帮助到同学欢迎大家收藏评论。