使用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任务,这里建议封装写在beh