使用vant的Uploader组件
我们使用上传的组件是vant-weapp,这样可以大大的提高我们的开发效率。使用Uploader组件首先在全局配置app.js引入该组件，也可以在页面配置json中引入
"usingComponents": {
"van-uploader": "/path/to/vant/uploader/index",
},
复制代码
新建uploader相关page，在uploade.wxml增加我们的上传组件
复制代码
file-list绑定的是上传的文件列表，bind:after-read绑定图片读取后的事件，bind:delete绑定删除图片事件,multiple是否支持多上传功能，默认为false,我们还需要在uploade.js增加相关的逻辑
上传地址配置
配置上传的初始化值
/**
* 页面的初始数据
*/
data: {
fileList: [] //需要上传的图片列表
},
复制代码
新建项目配置文件config/index.js
export default {
uploadUrl: `***************` //你的上传到服务器地址
}
复制代码
在使用的页面中导入配置文件
import config from 'path/to/config/index' //相对路径
复制代码
封装上传图片函数
为每上传一张图片返回promise任务，这里建议封装写在behaviors行为里面，因为一般在项目中我们会很多地方使用到该函数
/**
* @param {string} uploadFile 需要上传的文件
* @description 上传到指定服务器
* @return {Promise} 上传图片的promise
*/
uploadFile(uploadFile) {
return new Promise((resolve, reject) => {
wx.uploadFile({
url: config.uploadUrl, // 上传的服务器接口地址
filePath: uploadFile,
name: 'file', //上传的所需字段，后端提供
success: (res) => {
// 上传完成操作
const data = JSON.parse(res.data)
const url = data.data.url
resolve({
url: url
})
},
fail: (err) => {
//上传失败：修改pedding为reject
reject(err)
}
});
})
},
/
复制代码
实现上传操作函数
编写上传图片后的操作函数，可以为每一张上传的图片作为一次promise任务，等待全部的promise执行完毕才上传成功，否则失败
/**
* @param {object} event event.detail.file: 当前读取的文件
* @description 上传图片后操作
*/
afterRead(event) {
wx.showLoading({
title: '上传中...'
})
const { file } = event.detail //获取所需要上传的文件列表
let uploadPromiseTask = [] //定义上传的promise任务栈
for (let i = 0;i < file.length;i++) {
uploadPromiseTask.push(this.uploadFile(file[i].path)) //push进每一张所需要的上传的图片promise栈
}
Promise.all(uploadPromiseTask).then(res => {
//全部上传完毕
this.setData({
fileList: this.data.fileList.concat(res)
})
wx.hideLoading()
}).catch(error => {
//存在有上传失败的文件
wx.hideLoading()
wx.showToast({
title: '上传失败！',
icon: 'none',
})
})
}
复制代码
删除图片操作函数
绑定相对应的删除图片事件
/**
* @param {object} event event.detail.index: 删除图片的序号值
* @description 删除已上传的图片
*/
deleteImg(event) {
const delIndex = event.detail.index
const { fileList } = this.data
fileList.splice(delIndex, 1)
this.setData({
fileList
})
}
复制代码
预览已上传的图片
preview-image设置为true即可预览图片，更多van-uploader可查阅官方文档
复制代码
如果你觉得有帮助，给个赞关注下呗~谢谢！