在 Vue.js 2 中，你可以使用 el-upload 组件来实现多文件上传。el-upload 是 Element UI 中的一个上传组件，它提供了丰富的功能，包括多文件上传、拖放上传、文件类型限制等。
以下是一个示例，演示了如何在 Vue.js 2 中使用 el-upload 实现多文件上传：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
| <el-upload
ref="upload_file"
class="upload-file"
multiple
:auto-upload="false"
action="#"
:data="importForm.data"
:headers="importForm.headers"
:file-list="importForm.fileList"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-upload="handleBefore"
:http-request="handleHttpRequest"
:on-change="handleChange"
:show-file-list="false"
accept=".xlsx,.xls"
>
<el-button slot="trigger" type="primary">选取文件</el-button>
</el-upload>
<el-button type="primary" @click="submitFileForm">确 定</el-button>
importForm:{
data:{},
headers:{},
fileList:[],
}
//上传前回调
handleBefore: function (file) {},
// 点击文件列表中已上传的文件时的钩子
handlePreview: function (file) {},
// 文件列表移除文件时的钩子
handleRemove: function (file, fileList) {},
// 覆盖默认的上传行为，可以自定义上传的实现
handleHttpRequest: function (para) {},
handleChange(file, fileList) {
this.importForm.fileList = fileList;
},
// 提交上传文件
submitFileForm() {
// 创建新的数据对象
let formData = new FormData();
this.importForm.fileList.forEach((item) => {
formData.append("files", item.raw);
});
uploadUserInfos(formData).then(res=>{
if(res.data.success){
this.$alert('ok',{ dangerouslyUseHTMLString: true });
}
else {
this.$alert(res.data.msg,"上传失败",{ dangerouslyUseHTMLString: true });
}
this.$refs.upload_file.clearFiles();
});
},
export const uploadUserInfos = params => {
return axios.post(
`${base}/api/labourfiles/upload-userinfos`,
params,
{
headers: {
'Content-Type': 'multipart/form-data',
Authorization: `Bearer ${window.localStorage.getItem("Token")}`
}
}
);
};
|
1
2
3
4
5
| [HttpPost("upload-userinfos")]
public MessageModel<UploadUserInfoDto> UploadUserInfos(IFormCollection formCollection)
{
var files = (FormFileCollection)formCollection.Files;
}
|
