vue2 element-ui 的 upload 组件手动上传
背景:官方给的手动上传需要定义其它按钮在额外多一步操作,其实想 upload 上传文件后直接走自定义方法,每次都调试半天才可以使用。
这里记录下,下次在碰到 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 方法,实现手动上传。
有疑问的同学可以私信我、对帮助到同学欢迎大家收藏评论。