1.效果
2.代码
代码语言：javascript
复制<template>
<view>
<view class="uni-common-mt">
<view class="uni-uploader" v-if="imageListAreaShow">
<view class="uni-uploader-head">
<view class="uni-uploader-title">点击可预览选好的图片</view>
<view class="uni-uploader-info">{{ imageList.length }}/9</view>
</view>
<view class="uni-uploader-body">
<view class="uni-uploader__files">
<!-- 显示的已上传区 -->
<block v-for="(image, index) in imageList" :key="index">
<view class="uni-uploader__file position-relative">
<image class="uni-uploader__img rounded" :src="image" :data-src="image" @tap="previewImage" mode="aspectFill"></image>
<!-- 图片删除按钮 -->
<view class=" position-absolute top-0 right-0 p-10 rounded text-light-black" @click.stop="deleteImage(index)">
<text class="iconfont icon-guanbi text-white"></text>
</view>
</view>
</block>
<!-- 待上传区 -->
<view class="uni-uploader__input-box rounded"><view class="uni-uploader__input" @tap="chooseImage"></view></view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import permision from '@/static/js/permission.js';
var sourceType = [['camera'], ['album'], ['camera', 'album']];
var sizeType = [['compressed'], ['original'], ['compressed', 'original']];
export default {
props:{
draftImageList:Array,
imageListAreaShow:{
type:Boolean,
default:true
}
},
data() {
return {
title: 'choose/previewImage',
imageList: [],
sourceTypeIndex: 2,
sourceType: ['拍照', '相册', '拍照或相册'],
sizeTypeIndex: 2,
sizeType: ['压缩', '原图', '压缩或原图'],
countIndex: 8,
count: [1, 2, 3, 4, 5, 6, 7, 8, 9]
};
},
mounted() {
this.imageList=this.draftImageList
},
onUnload() {
(this.imageList = []),
(this.sourceTypeIndex = 2),
(this.sourceType = ['拍照', '相册', '拍照或相册']),
(this.sizeTypeIndex = 2),
(this.sizeType = ['压缩', '原图', '压缩或原图']),
(this.countIndex = 8);
},
methods: {
// 删除图片
deleteImage(index) {
uni.showModal({
title: '提示',
content: '是否要删除该图片？',
showCancel: true,
cancelText: '取消',
confirmText: '删除',
success: res => {
if (res.confirm) {
this.imageList.splice(index, 1);
this.$emit('changeImage', this.imageList);
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
},
sourceTypeChange: function(e) {
this.sourceTypeIndex = parseInt(e.detail.value);
},
sizeTypeChange: function(e) {
this.sizeTypeIndex = parseInt(e.detail.value);
},
countChange: function(e) {
this.countIndex = e.detail.value;
},
chooseImage: async function() {
// #ifdef APP-PLUS
// TODO 选择相机或相册时 需要弹出actionsheet，目前无法获得是相机还是相册，在失败回调中处理
if (this.sourceTypeIndex !== 2) {
let status = await this.checkPermission();
if (status !== 1) {
return;
}
}
// #endif
if (this.imageList.length === 9) {
let isContinue = await this.isFullImg();
console.log('是否继续?', isContinue);
if (!isContinue) {
return;
}
}
uni.chooseImage({
sourceType: sourceType[this.sourceTypeIndex],
sizeType: sizeType[this.sizeTypeIndex],
count: this.imageList.length this.count[this.countIndex] > 9 ? 9 - this.imageList.length : this.count[this.countIndex],
success: res => {
this.imageList = this.imageList.concat(res.tempFilePaths);
this.$emit('changeImage', this.imageList);
},
fail: err => {
// #ifdef APP-PLUS
if (err['code'] && err.code !== 0 && this.sourceTypeIndex === 2) {
this.checkPermission(err.code);
}
// #endif
// #ifdef MP
if (err.errMsg.indexOf('cancel') !== '-1') {
return;
}
uni.getSetting({
success: res => {
let authStatus = false;
switch (this.sourceTypeIndex) {
case 0:
authStatus = res.authSetting['scope.camera'];
break;
case 1:
authStatus = res.authSetting['scope.album'];
break;
case 2:
authStatus = res.authSetting['scope.album'] && res.authSetting['scope.camera'];
break;
default:
break;
}
if (!authStatus) {
uni.showModal({
title: '授权失败',
content: 'Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限',
success: res => {
if (res.confirm) {
uni.openSetting();
}
}
});
}
}
});
// #endif
}
});
},
isFullImg: function() {
return new Promise(res => {
uni.showModal({
content: '已经有9张图片了,是否清空现有图片？',
success: e => {
if (e.confirm) {
this.imageList = [];
res(true);
} else {
res(false);
}
},
fail: () => {
res(false);
}
});
});
},
previewImage: function(e) {
var current = e.target.dataset.src;
uni.previewImage({
current: current,
urls: this.imageList
});
},
async checkPermission(code) {
let type = code ? code - 1 : this.sourceTypeIndex;
let status = permision.isIOS
? await permision.requestIOS(sourceType[type][0])
: await permision.requestAndroid(type === 0 ? 'android.permission.CAMERA' : 'android.permission.READ_EXTERNAL_STORAGE');
if (status === null || status === 1) {
status = 1;
} else {
uni.showModal({
content: '没有开启权限',
confirmText: '设置',
success: function(res) {
if (res.confirm) {
permision.gotoAppSetting();
}
}
});
}
return status;
}
}
};
</script>
<style>
.cell-pd {
padding: 22rpx 30rpx;
}
.list-pd {
margin-top: 50rpx;
}
</style>
