最近在做手机版页面，采用的vant框架，这个上传控件和以前用iview、element有点不一样，iview、element都是直接提供后端接口文件会自动发送到后端，vant需要自己负责发送文件到后端，对于我这种面向百度编程人员还是有点难度。特意记一下，能帮到其他面向百度编程人员
代码
很简单，基本是使用文件构建FormData参数，如下：
html代码
1
2
3
4
5
<van-uploader
:after-read="afterRead"
:before-delete="beforeDelete"
v-model="fileList"
/>
ts代码
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
fileList=[];
/**文件上传 */
afterRead(file) {
// 此时可以自行将文件上传至服务器
// console.log(file);
let that = this;
let id = 1;
if (!/image\/[a-zA-z]+/.test(file.file.type)) {
this.$toast("请上传图片");
return false;
}
let params = new FormData();
params.append("file", file.file);
params.append("ID", id);
let config = {
headers: {
//添加请求头
"Content-Type": "multipart/form-data"
}
};
return new Promise((resolve, reject) => {
//我的后端还是asp的
//需要其他后端的可以看我以前的博文去复制
Ajax.post("/***/FileUpload.ashx", params, config)
.then(res => {
if (res.status === 200) {
//可以直接再file上附加属性，这样再删除的时候就可以作为标识从服务器删除数据
file.path = res.data[0].Path;
//URL是一个后端地址（前后端不在一个地址）常量
file.url = URL + res.data[0].Path;
console.log(that.fileList);
resolve();
} else reject();
})
.catch(() => {
reject();
});
});
}
beforeDelete(file) {
console.log(file);
return new Promise((resolve, reject) => {
//我的后端删除文件直接使用文件地址，你们的根据自己的修改
Ajax.post(
"/***/DeleteFile.ashx?path=" +
escape(file.path) +
"&ts=" +
new Date().getTime()
)
.then(res => {
if (res.status === 200) resolve();
else reject();
})
.catch(() => {
reject();
});
});
}
这里没有写从后端获取文件列表，你需要自己获取，文件列表只需要包含url或者content（文件的base64编码）两个属性就可以正常绑定列表，上传的时候通常是content，从服务器返回的我用的url，主要是读取文件再转换base64我不会，还要再百度一次，太麻烦了。
本文会经常更新，请阅读原文： https://dashenxian.github.io/post/vant%E4%B8%8A%E4%BC%A0%E6%96%87%E4%BB%B6 ，以避免陈旧错误知识的误导，同时有更好的阅读体验。
本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布，但务必保留文章署名 小神仙 （包含链接： https://dashenxian.github.io ），不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。如有任何疑问，请 与我联系 (125880321@qq.com) 。