uniapp app开发只选择图片,获取图片文件列表,并不上传图片。
<template>
<div class="fileListMain">
<u-cell-group>
<u-cell title="添加图片" :value="list.length+'/9'" :arrow="false" :border="false"></u-cell>
</u-cell-group>
<div class="fileList">
<div class="fileImage" v-for="(item,index) in list" :key="index">
<div class="deleteInfo" @click.stop="deleteImg(index)">
<u-icon color="#fff" size="15" name="close"></u-icon>
</div>
<u--image @click="previewImg(index)" :showLoading="true" :src="item" width="80px" height="80px">
</u--image>
</div>
<div class="chooseImage" v-if="list.length<9" @click="chooseImage">
<u-icon name="plus" color="#e0e2e5" size="50"></u-icon>
</div>
</div>
</div>
</template>
<script>
import {
uuid
} from 'vue-uuid';
export default {
data() {
return {
show: false,
list: []
}
},
props: {
name: {
type: String,
default () {
return '';
}
}
},
onShow() {
},
methods: {
deleteImg(index) {
this.list.splice(index, 1)
},
previewImg(index) {
let _this = this;
let imgsArray = [];
var img = this.list;
uni.previewImage({
current: index,
urls: img,
indicator: 'number',
loop: true
});
},
getFileList() {
return this.list
},
getFile(list) {
var that = this;
list.forEach((type, index) => {
// console.log(type)
plus.zip.compressImage({
src: type,
dst: '_doc/' + uuid.v1() + index + '.jpg',
quality: 100, //压缩比例
overwrite: true,
width: '350px' //图片宽度
},
function(e) {
//执行上传
console.log(e.target)
if (that.list.length < 9) {
that.list.push(e.target)
}
},
function(error) {
console.log('Compress error!');
}
);
});
},
chooseImage() {
var that = this;
uni.chooseImage({
count: 9,
sizeType: ['compressed'],
sourceType: ['camera', 'album'],
success: res => {
that.getFile(res.tempFilePaths)
},
fail: err => {
// #ifdef MP
uni.getSetting({
success: res => {
let authStatus = res.authSetting['scope.album'] && res.authSetting[
'scope.camera'];
if (!authStatus) {}
}
});
// #endif
}
});
}
}
}
</script>
<style scoped lang="scss">
.fileListMain {
width: 750rpx;
}
.fileList {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
flex-direction: row;
align-content: flex-start;
width: 690rpx;
margin: 0 auto;
margin-bottom: 20px;
.fileImage {
width: 150rpx;
height: 150rpx;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
border: 1px solid #e6e8ea;
margin-right: 20rpx;
position: relative;
.deleteInfo {
position: absolute;
right: -3rpx;
top: -3rpx;
background: rgba(0, 0, 0, 0.7);
width: 30rpx;
height: 30rpx;
z-index: 100;
border-radius: 0 0 0 10rpx;
}
}
.chooseImage {
width: 150rpx;
height: 150rpx;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
border: 1px solid #e6e8ea;
}
}
</style>