elementui el-upload 上传文件
文章目录
- 前言
- 一、Html
- 2.上传
- 总结
前言
在使用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=".pem" :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>
data(){return {fileListKpem: [],}
}
2.上传
代码如下（示例）：
//选择文件async onUploadKpem(file) {let formData = new FormData();formData.append("file", file.file); //文件上传需要的参数 file 和 tokenformData.append("token", this.token);let upKpem = await UploadFileKpem(formData); //UploadFileKpem 自己封装的接口// console.log(upKpem,"上传")if(upKpem.code == 200){....}else{....}},
//点击上传
submitUploadKpem() {this.$refs.uploadKpem.submit();},
总结
需要注意的是
accept 设置了上传文件类型 可自己更换
:limit=“1” 设置了上传最大个数为1
需要多文件上传时 跟上面代码基本一致 需要注意的是onUploadKpem方法里面可以使用map foreach等添加文件 实现多文件上传