公司一个页面中要求实现了一个图片上传的组件,
上传成功是这个样子
image.png
点击右上角的x号可以删除, 点击添加可以上传照片并且限制最多只能上传三张照片
1.点击选中图片
chooseImageBtn(res) {
var that = this
wx.chooseImage({
count: 3, //指定张数
sizeType: ['original', 'compressed'], //原图 压缩图
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success(res) {
//每次只能上传一张 多张照片要遍历
res.tempFilePaths.forEach(item => {
that.uploadFile(item); //图片上传每次一张 每次遍历都调用这个借口
});
}
})
},
2.上传到图片服务器,将返回的图片链接存放在一个数组中
wx.uploadFile官网说明
uploadFile(url) {
var that = this;
const token = wx.getStorageSync('token') || ''; //获取token
wx.uploadFile({
url: config.DOMAIN + '/common/auth/upload', //图片服务器的请求路径
filePath: url, //文件流
name: 'file',
//
header: {
"Content-Type": "multipart/form-data",
"X-Auth-Token": token
},
formData: {
'user': 'test'
},
success(res) {
const mata = JSON.parse(res.data)
// 把数据存到imglist中去
var url = config.DOMAIN + mata.fileUpload.fileUrl
that.data.files.push(url)
that.setData({
files: that.data.files
})
// 判断图片的长度 如果等于3 就隐藏添加按钮
if (that.data.files.length == 3) {
that.setData({
addimgBox: true
})
}
}
})
},
3.点击删除图片
在html中添加上
<image class="icon" catchtap='del' data-index="{{index}}" src="/assets/images/delete_picture_icon.png"></image>
//在遍历显示的时候添加下标 方便点击删除
const index = e.currentTarget.dataset.index //获取到当前点击的下标
this.data.files.splice(index, 1) // 移除点击的项的图片
this.setData({
files: this.data.files,
addimgBox: false
})
4.将数据中的图片上传
直接把存放照片的数组提交就可以了
有什么写的不明白的地方可以直接问我 看到了都会回的
网友评论