使用input标签实现上传功能
此文档以导入功能为例
template
<
input
type=
"file"
id=
"fileInput"
ref=
"fileInput"
multiple
@
change="
uploadFun(
$event)"
style=
"display: none"
/
>
script
uploadFun(
e) {
const
objList =
this.
$refs.
fileInput.
files;
const
fileList = [...
objList];
let
formData =
new
FormData();
fileList.
forEach((
item)
=> {
formData.
append(
'file',
item);
});
if (
fileList.
length >
0) {
const
that =
this;
that.
$api.
Law.
ImportFun(
formData)
.
then((
res)
=> {
if (
res.
status.
code ==
200) {
if (
res.
result.
status ===
1) {
that.
$message({
type
:
'success',
message
:
res.
result.
infoList,
});
}
else {
that.
$message({
type
:
'error',
message
:
res.
result.
infoList });
}
that.
showListData(
1);
}
else {
that.
$message({
type
:
'error',
message
:
res.
status.
message });
}
e.
target.
value =
'';
})
.
catch(()
=> {
e.
target.
value =
'';
});
}
},
遇到的bug
1、无法连续使用上传功能
原因：上传文件之后再次上传，input无法识别出改变，所以不会调用上传功能
解决方法：在上传文件之后清空input的值
PNG