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中：文章來源：http://www.zghlxwxcb.cn/news/detail-599536.html
"usingComponents": {
"van-uploader": "@vant/weapp/uploader/index"
}
js中：文章來源地址http://www.zghlxwxcb.cn/news/detail-599536.html
data: {
fileList: [],
newArr:[],
count: 1
},
// 點(diǎn)擊上傳圖片
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
})
},
// 點(diǎn)擊刪除圖片
deleteImg(event) {
let id = event.detail.index //能獲取到對應(yīng)的下標(biāo)
let newArr = this.data.newArr //上傳的數(shù)組(不需要[{url:XXX}]格式)
let fileList = this.data.fileList //頁面展示的數(shù)組(需要[{url:XXX}]格式)
newArr.splice(id, 1) //根據(jù)下標(biāo)來刪除對應(yīng)的圖片
fileList.splice(id, 1)
this.setData({
fileList: fileList,
newArr: newArr
})
},
到了這里，關(guān)于【微信小程序】Vant Weapp 組件 uploader文件上傳的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![微信小程序引入vant與解決[ app.json 文件內(nèi)容錯誤] [“van-button“]: “@vant/weapp/button/index“ 未找到](https://imgs.yssmx.com/Uploads/2024/02/503116-1.png)
![【微信小程序】[ app.json 文件內(nèi)容錯誤] app.json: [“usingComponents“][“van-button“]: “@vant/weapp/button/index“ 未找](https://imgs.yssmx.com/Uploads/2024/02/559785-1.png)
