微信小程序图片上传并展示,vant组件+wx.uploadFile
实现功能:图片展示+上传服务器+删除
//xwml部分: vant的Uploader功能
<van-cell use-label-slot custom-style="padding-bottom: 0" title="问题附件" border="{
{false}}">
<view class="uploader" slot="label" style="margin-top: 20rpx;">
<van-uploader bind:after-read="getAttachment" bind:delete="delAttachment" deletable="{
{true}}" preview-size="100" file-list="{
{ attachment }}" />
</view>
</van-cell>
<van-uploader>
组件 图片上传
bind:after-read
事件 选中图片触发的事件
deletable
开启右上角的删除按钮,默认是true
bind:delete
删除触发的事件
file-list
遍历的图片 是数组对象类型 :通过向组件传入file-list
属性,可以绑定已经上传的图片列表,并展示图片列表的预览图,以下是filelist的结构:
fileList: [ { url: 'https://img.yzcdn.cn/vant/leaf.jpg', name: '图片1', }, // Uploader 根据文件后缀来判断是否为图片文件 // 如果图片 URL 中不包含类型信息,可以添加 isImage 标记来声明 { url: 'http://iph.href.lu/60x60?text=default', name: '图片2', isImage: true, deletable: true, }, ],
js部分: 配合微信小程序的上传文件API完成图片的上传
data:{
attachment: [],
},
// 获取上传的照片
getAttachment({
detail: {
file } }) {
wx.uploadFile({
url: wx.http.baseURL + '/upload',
filePath: file.url,
name: 'file',
header: {
Authorization: 'Bearer ' + getApp().token
},
success: (res) => {
this.data.attachment.push(JSON.parse(res.data).data)
this.setData({
attachment: this.data.attachment
})
}
})
},
//删除
delAttachment({
detail }) {
const attachment = this.data.attachment.filter((item, index) => index !== detail.index)
this.setData({
attachment
})
},
wx.uploadFile
是微信小程序提供的API ,用于将本地资源上传到服务器.官方地址:
https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.html
- 在成功的回调函数里注意返回的res.data是字符串,这里需要用
JSON.parse
转换成对象- 由于attachment在data中是数组,这里需要将每一次上传的图片的信息(对象)存入进去,我这里用push推入数组,由于此时往数据添加数据,由于是单向数据流,所以后面又用了
this.setData
来模拟双向数据流绑定- 在删除时,
delete
方法提供的回调里有删除的index可以让我们来对数组进行操作,这里用filter过滤来处理
- 官网地址:https://vant-contrib.gitee.io/vant-weapp/#/uploader