模仿官方例子:
查看
开发如下:
1.复制的html代码
<view class="uni-list list-pd">
<view class="uni-list-cell cell-pd">
<view class="uni-uploader">
<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">
<!-- 刪除垃圾桶图标 -->
<!-- <view class="icon iconfont icon-shanchu" @tap="delete(index)"></view> -->
<view class="icon iconfont icon-shanchu" @tap="delete1(index)"></view>
<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>
</view>
</view>
</view>
2. js代码
<script>
var sourceType = [
['camera'],
['album'],
['camera', 'album']
]
var sizeType = [
['compressed'],
['original'],
['compressed', 'original']
]
let changelook=['所有人可见','仅自己可见'];
import uniNavBar from "../../components/uni-nav-bar/uni-nav-bar.vue"
export default {
components:{uniNavBar},
data() {
return {
yinshi: "所有人可见",
text:"大家好,想发言就发吧",
imageList: [],
sourceTypeIndex: 2,
sourceType: ['拍照', '相册', '拍照或相册'],
sizeTypeIndex: 2,
sizeType: ['压缩', '原图', '压缩或原图'],
countIndex: 8,
count: [1, 2, 3, 4, 5, 6, 7, 8, 9]
}
},
methods: {
// 删除图片
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;
// }
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);
},
fail: (err) => {
// #ifdef APP-PLUS
if (err['code'] && err.code !== 0 && this.sourceTypeIndex === 2) {
this.checkPermission(err.code);
}
// #endif
// #ifdef MP
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
}
})
},
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;
},
back(){
uni.navigateBack({
delta:1
})
},
submit(){
console.log("发布");
},
changelook(){
console.log("隐私");
uni.showActionSheet({
itemList: changelook,
success: (res)=> {
this.yinshi=changelook[res.tapIndex];
// console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
}
// ,fail: function (res) {
// console.log(res.errMsg);
// }
});
},
delete1(index){
uni.showModal({
title: '是否删除',
content: '是否删除',
success: (res)=> {
if (res.confirm) {
console.log('用户点击确定');
this.imageList.splice(index,1);
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
}
}
}
</script>
3.css代码
<style>
.uni-textarea{
border: 1upx solid #eeeeee;
}
.cell-pd {
padding: 22rpx 30rpx;
}
.list-pd {
margin-top: 50rpx;
}
.uni-uploader__file{
position: relative;
}
.icon-shanchu{
position: absolute;
top: 0;
right: 0;
background: #333333;
color: #ffffff;
padding: 2upx 10upx;
border-radius: 10upx;
z-index: 1000;
}
</style>
附录:完整代码
<template>
<view>
<!-- 自定义导航栏 -->
<uni-nav-bar :statusBar="true" rightText="发布" left-icon="arrowleft" @clickLeft="back" @clickRight="submit">
<view class="u-f-ajc" @tap="changelook">
{{yinshi}}
<view class="icon iconfont icon-xialazhankai"></view>
</view>
</uni-nav-bar>
<!-- 多行输入框 -->
<textarea class="uni-textarea" v-model="text" placeholder="发布信息" />
<!-- 多图片上传 -->
<view class="uni-list list-pd">
<view class="uni-list-cell cell-pd">
<view class="uni-uploader">
<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">
<!-- 刪除垃圾桶图标 -->
<!-- <view class="icon iconfont icon-shanchu" @tap="delete(index)"></view> -->
<view class="icon iconfont icon-shanchu" @tap="delete1(index)"></view>
<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>
</view>
</view>
</view>
</view>
</template>
<script>
var sourceType = [
['camera'],
['album'],
['camera', 'album']
]
var sizeType = [
['compressed'],
['original'],
['compressed', 'original']
]
let changelook=['所有人可见','仅自己可见'];
import uniNavBar from "../../components/uni-nav-bar/uni-nav-bar.vue"
export default {
components:{uniNavBar},
data() {
return {
yinshi: "所有人可见",
text:"大家好,想发言就发吧",
imageList: [],
sourceTypeIndex: 2,
sourceType: ['拍照', '相册', '拍照或相册'],
sizeTypeIndex: 2,
sizeType: ['压缩', '原图', '压缩或原图'],
countIndex: 8,
count: [1, 2, 3, 4, 5, 6, 7, 8, 9]
}
},
methods: {
// 删除图片
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;
// }
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);
},
fail: (err) => {
// #ifdef APP-PLUS
if (err['code'] && err.code !== 0 && this.sourceTypeIndex === 2) {
this.checkPermission(err.code);
}
// #endif
// #ifdef MP
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
}
})
},
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;
},
back(){
uni.navigateBack({
delta:1
})
},
submit(){
console.log("发布");
},
changelook(){
console.log("隐私");
uni.showActionSheet({
itemList: changelook,
success: (res)=> {
this.yinshi=changelook[res.tapIndex];
// console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
}
// ,fail: function (res) {
// console.log(res.errMsg);
// }
});
},
delete1(index){
uni.showModal({
title: '是否删除',
content: '是否删除',
success: (res)=> {
if (res.confirm) {
console.log('用户点击确定');
this.imageList.splice(index,1);
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
}
}
}
</script>
<style>
.uni-textarea{
border: 1upx solid #eeeeee;
}
.cell-pd {
padding: 22rpx 30rpx;
}
.list-pd {
margin-top: 50rpx;
}
.uni-uploader__file{
position: relative;
}
.icon-shanchu{
position: absolute;
top: 0;
right: 0;
background: #333333;
color: #ffffff;
padding: 2upx 10upx;
border-radius: 10upx;
z-index: 1000;
}
</style>