|
|
<template>
|
|
|
<view class="">
|
|
|
|
|
|
<view class="cu-bar bg-white margin-top">
|
|
|
<view class="action">
|
|
|
图片上传
|
|
|
</view>
|
|
|
<view class="action">
|
|
|
{{imgList.length}}/4
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="cu-form-group">
|
|
|
<view class="grid col-4 grid-square flex-sub">
|
|
|
<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage"
|
|
|
:data-url="imgList[index].url">
|
|
|
<image :src="imgList[index].url" mode="aspectFill"></image>
|
|
|
<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
|
|
|
<text class='cuIcon-close'></text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
|
|
|
<text class='cuIcon-cameraadd'></text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
imgList: [],
|
|
|
attachmentId: '',
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
//上传图片
|
|
|
ChooseImage() {
|
|
|
let self = this;
|
|
|
uni.chooseImage({
|
|
|
count: 4, //可选择数量，默认9
|
|
|
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
|
|
sourceType: ['album', 'camera'], //从相册选择或从使用相机
|
|
|
success: async (res) => {
|
|
|
//上传图片大小限制
|
|
|
for (let i = 0; i < res.tempFilePaths.length; i++) {
|
|
|
if (res.tempFiles[0].size > 10 * 1024 * 1000) { //上传图片大小限制
|
|
|
uni.showToast({
|
|
|
title: "照片大小不能超过10MB",
|
|
|
icon: "none"
|
|
|
});
|
|
|
return
|
|
|
}
|
|
|
}
|
|
|
try {
|
|
|
uni.showLoading({
|
|
|
title: "上传中...",
|
|
|
mask: true
|
|
|
});
|
|
|
for (let i = 0; i < res.tempFilePaths.length; i++) {
|
|
|
uni.uploadFile({
|
|
|
url: self.$serverPath.UF + 'file/upload/' + self.attachmentId + '/app/style', //post请求的地址
|
|
|
filePath: res.tempFilePaths[i],
|
|
|
name: 'file',
|
|
|
formData: {
|
|
|
// 'username': this.userInfo.username //formData是指除了图片以外，额外加的字段
|
|
|
},
|
|
|
success: (uploadFileRes) => {
|
|
|
//这里要注意，uploadFileRes.data是个String类型，要转对象的话需要JSON.parse一下
|
|
|
let obj = JSON.parse(uploadFileRes.data);
|
|
|
self.attachmentId = obj.data.relationId;
|
|
|
let image = {
|
|
|
'id': obj.data.id,
|
|
|
'relationId': obj.data.relationId,
|
|
|
'url': res.tempFilePaths[i],
|
|
|
};
|
|
|
self.imgList.push(image);
|
|
|
|
|
|
},
|
|
|
fail: (res) => {
|
|
|
console.log(res);
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
} catch (e) {
|
|
|
console.log(e);
|
|
|
} finally {
|
|
|
uni.hideLoading();
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
//查看图片
|
|
|
ViewImage(e) {
|
|
|
let urls = [];
|
|
|
for (let i = 0; i < this.imgList.length; i++) {
|
|
|
urls.push(this.imgList[i].url);
|
|
|
}
|
|
|
uni.previewImage({
|
|
|
urls: urls,
|
|
|
current: e.currentTarget.dataset.url
|
|
|
});
|
|
|
},
|
|
|
//删除图片
|
|
|
DelImg(e) {
|
|
|
let self = this;
|
|
|
uni.showModal({
|
|
|
title: '',
|
|
|
content: '确定要删除么',
|
|
|
cancelText: '取消',
|
|
|
confirmText: '确定',
|
|
|
success: res => {
|
|
|
if (res.confirm) {
|
|
|
let index = e.currentTarget.dataset.index;
|
|
|
if (self.imgList.length != 0) {
|
|
|
let id = self.imgList[index].id;
|
|
|
let url = self.$serverPath.UF + 'file/delete/' + id;
|
|
|
this.$util.urlRequest(url, {}, 'POST', function (ret) {
|
|
|
let res = ret.data;
|
|
|
if (res.code == 0) {
|
|
|
self.imgList.splice(index, 1);
|
|
|
} else {
|
|
|
uni.showToast({
|
|
|
title: "删除失败，请重试",
|
|
|
icon: "none"
|
|
|
});
|
|
|
console.log('请求失败:', res)
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
|
|
|
|
|
|
},
|
|
|
onShow:function() {
|
|
|
setTimeout(function() {
|
|
|
|
|
|
uni.navigateBack()
|
|
|
}, 100);
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
|
|
|
</style>
|