wxml中：
<van-uploader class="uploader" bind:after-read="afterRead" bind:delete="deleteImg" file-list="{{ fileList }}" preview-full-image="true" multiple="true" preview-image="true" max-count="{{count}}">
</van-uploader>
json中：文章来源：https://www.toymoban.com/news/detail-599536.html
"usingComponents": {
"van-uploader": "@vant/weapp/uploader/index"
}
js中：文章来源地址https://www.toymoban.com/news/detail-599536.html
data: {
fileList: [],
newArr:[],
count: 1
},
// 点击上传图片
afterRead(event) {
let that = this
var img = event.detail.file[0];
wx.uploadFile({
url: 'XXXX',
filePath: img.url,
header:{
"Content-Type": "multipart/form-data",
"Authorization": "token " + wx.getStorageSync('token'),
},
name: 'file',
success (res){
res.data = JSON.parse(res.data)
that.data.newArr.push(res.data.data.urlRelativePath)
that.setData({newArr:that.data.newArr})
},
fail(res) {
console.log(res);
}
})
this.data.fileList.push(img)
that.setData({
fileList:this.data.fileList
})
},
// 点击删除图片
deleteImg(event) {
let id = event.detail.index //能获取到对应的下标
let newArr = this.data.newArr //上传的数组(不需要[{url:XXX}]格式)
let fileList = this.data.fileList //页面展示的数组(需要[{url:XXX}]格式)
newArr.splice(id, 1) //根据下标来删除对应的图片
fileList.splice(id, 1)
this.setData({
fileList: fileList,
newArr: newArr
})
},
到了这里，关于【微信小程序】Vant Weapp 组件 uploader文件上传的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![微信小程序引入vant与解决[ app.json 文件内容错误] [“van-button“]: “@vant/weapp/button/index“ 未找到](https://imgs.yssmx.com/Uploads/2024/02/503116-1.png)
![【微信小程序】[ app.json 文件内容错误] app.json: [“usingComponents“][“van-button“]: “@vant/weapp/button/index“ 未找](https://imgs.yssmx.com/Uploads/2024/02/559785-1.png)
