elementui el-upload 上传文件

---

前言

在使用element中的el-upload上传文件或者图片时，需要先把el-upload的自动上传改为手动上传:auto-upload=“false”

然后el-upload内部会调用this.$refs.upload.submit();方法，从而实现文件上传。

实现效果如下

下面代码可直接复制使用，其中参数或者名称可能部分有错误 自行修改即可 不影响功能

一、html

 <el-upload class="upload-demo" ref="uploadKpem" :http-request="onUploadKpem" action="" 
     :on-preview="handlePreviewKpem"  :on-remove="handleRemoveKpem" :file-list="fileListKpem" 
     :auto-upload="false" accept="" :limit="1">
      <el-button slot="trigger" type="primary">文件选择</el-button>
      <el-button style="margin-left: 10px" type="primary" plain @click="submitUploadKpem()">确认上传</el-button>
  </el-upload>

二 、script

import { UploadFileKpem  } from '../../XXXX'

data(){
	return {
         fileListKpem: [],

	}
}

//选择文件
async onUploadKpem(file) {
    let formData = new FormData();
     formData.append("file", file.file);   //后端接口 文件上传需要的参数 file 和 token
     formData.append("token", this.token); // this.token 自己登录 自己获取
     let upKpem = await UploadFileKpem(formData); //UploadFileKpem 自己封装的接口
     // console.log(upKpem,"上传")
     if(upKpem.code == 200){
        // 接口调用成功逻辑
       }else{
         ....
       }   
   },
//确认上传
submitUploadKpem() {
   this.$refs.uploadKpem.submit();
},
// 注意uploadKpem 与 html中ref定义名称一致
 handlePreviewKpem(file) { },  //点击文件列表中已上传的文件时的钩子
 handleRemoveKpem(file, fileList) {},  //文件列表移除文件时的钩子

---

接口调用示例

总结

需要注意的是
accept 设置了上传文件类型 可自己更换 空代表支持所有文件上传
:limit=“1” 设置了上传最大个数为1