<template>
|
<view class="upload">
|
<view class="upload_row" @click="selectImage">
|
<u-icon name="plus" color="#222222" size="22"></u-icon>
|
</view>
|
<view class="upload_row" v-for="(item, index) in fileList" :key="index">
|
<view class="upload_row_dele" @click="dele(index)">
|
<u-icon name="close-circle-fill" color="red" size="16"></u-icon>
|
</view>
|
<image :src="item.url" mode="widthFix"></image>
|
</view>
|
<view class="upload_rowZw"></view>
|
<view class="upload_rowZw"></view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
name: "uploadImage",
|
props: {
|
fileList: {
|
type: Array,
|
default:() => []
|
},
|
folder: {
|
type: String,
|
default:() => ''
|
}
|
},
|
methods: {
|
// 删除图片
|
dele(index) {
|
this.$emit('dele', index)
|
},
|
// 选择图片
|
selectImage() {
|
var that = this
|
that.$ww.chooseImage({
|
count: 9,
|
sizeType: ['original', 'compressed'],
|
sourceType: ['album', 'camera'],
|
success(res) {
|
that.getUploadImage(res.localIds)
|
}
|
})
|
},
|
// 获取服务器图片id
|
getUploadImage(localIds) {
|
var that = this
|
let serverIds = []
|
let total = localIds.length;
|
let index = 0
|
let getServerId = async () => {
|
if (localIds[index]) {
|
const ID = localIds[index]
|
let res = await that.$ww.uploadImage({ localId: ID })
|
serverIds.push(res.serverId)
|
index++
|
let data = await that.$u.api.uploadBatchFromWx({
|
mediaIds: [res.serverId],
|
folder: this.folder
|
})
|
data.data.forEach(item => {
|
item.fileurl = item.imgaddr
|
})
|
that.$emit('getFileList', data.data)
|
getServerId()
|
} else {
|
// let data = await that.$u.api.uploadBatchFromWx({
|
// mediaIds: serverIds,
|
// folder: this.folder
|
// })
|
// data.data.forEach(item => {
|
// item.fileurl = item.imgaddr
|
// })
|
// that.$emit('getFileList', data.data)
|
}
|
}
|
getServerId()
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.upload {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
.upload_rowZw {
|
width: 150rpx;
|
height: 0;
|
}
|
.upload_row {
|
width: 150rpx;
|
height: 150rpx;
|
background-color: #cdcdcd;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-bottom: 30rpx;
|
position: relative;
|
overflow: hidden;
|
.upload_row_dele {
|
position: absolute;
|
top: 15rpx;
|
right: 15rpx;
|
z-index: 99;
|
}
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
</style>
|
