终于弄懂这个选择图片的流程,删除了很多不需要的地方,最终得到的就是这个版本
页面部分
<view>上传图片 {{imageList.length}}/{{count}}</view>
<view class="uni-list list-pd">
<view class="uni-uploader__files">
<block v-for="(image,index) in imageList" :key="index">
<view class="uni-uploader__file">
<image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage"></image>
</view>
</block>
<view class="uni-uploader__input-box">
<view class="uni-uploader__input" @tap="chooseImage"></view>
</view>
</view>
</view>
script部分
export default {
data() {
return {
imageList:[],
count: 3, //设置能上传的最大数量
}
},
methods: {
/* ---------------上传图片--------------- */
chooseImage: async function() {
const _self = this
if (_self.imageList.length === _self.count) {
let isContinue = await _self.isFullImg();
console.log("是否继续?", isContinue);
if (!isContinue) {
return;
}
}
/* 选中图片 */
uni.chooseImage({
sourceType: ['camera', 'album'],
sizeType: ['original', 'compressed'],
count: _self.count,
success: (res) => {
const tempFilePaths = res.tempFilePaths; //获取到本地图片地址
/* 上传图片 */
const uploadTask = uni.uploadFile({
url : 'http://*********',
filePath: tempFilePaths[0],
name: 'file',
header:{
'Authorization': token
},
formData: {
'user': 'test',
},
success: function (res) {
let toJsonRes = JSON.parse(res.data) //获取到后台处理过的地址
let list = []
list.push( "http://*********"+toJsonRes.data)
_self.imageList = _self.imageList.concat(list);
}
});
}
})
},
/* 图片数量满了弹出窗口询问是否清空 */
isFullImg: function() {
return new Promise((res) => {
uni.showModal({
content: "已经有"+this.count+"张图片了,是否清空现有图片?",
success: (e) => {
if (e.confirm) {
this.imageList = [];
} else {
}
},
fail: () => {
res(false)
}
})
})
},
/* 预览图片 */
previewImage: function(e) {
let current = e.target.dataset.src
uni.previewImage({
current: current,
urls: this.imageList
})
},
/* 删除图片 */
delImage(e) {
uni.showModal({
title: '删除照片',
content: '确定要删除这张照片吗?',
cancelText: '取消',
confirmText: '确定',
success: res => {
if (res.confirm) {
this.imageList.splice(e.currentTarget.dataset.index, 1);
}
}
})
},
详细可查看官方文档
从本地相册选择图片或使用相机拍照