开箱即用
<template>
<!-- 图片上传功能 -->
<view>
<view class="feedback-image-box">
<view class="feedback-image-item" v-for="(item,index) in imagelist" :key="index">
<view class="close-icon" @click="del(index)">
<uni-icons type="closeempty" size="18" color="#ffffff"></uni-icons>
</view>
<view class="image-box">
<image :src="item.url" mode="aspectFill"></image>
</view>
</view>
<view class="feedback-image-item" @click="addimage" v-if="imagelist.length<5">
<view class="image-box">
<uni-icons type="plusempty" size="50" color="#999999"></uni-icons>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
imagelist: []
}
},
methods: {
del(index) {
this.imagelist.splice(index, 1)
},
addimage() {
let count = 5 - this.imagelist.length
uni.chooseImage({
count: count,
success: (res) => {
const tempfilepaths = res.tempFiles
tempfilepaths.forEach((item, index) => {
// 处理h5多选的状况
if (index < count) {
this.imagelist.push({
url: item.path,
couldpath: item.name
})
}
})
}
})
},
async submit() {
let imagePath = []
uni.showLoading()
for (let i = 0; i < this.imagelist.length; i++) {
let filePath = this.imagelist[i].url
let couldpath = this.imagelist[i].couldpath
filePath = await this.uploadFiles(filePath, couldpath)
imagePath.push(filePath)
}
const obj = {
content: this.content,
feedbackImage: imagePath
}
this.updateFeedback(obj)
},
async uploadFiles(filePath, couldpath) {
const result = await uniCloud.uploadFile({
filePath: filePath,
cloudPath: couldpath
})
return result.fileID
},
updateFeedback(obj) {
this.$api.update_feedback(obj).then(res => {
uni.hideLoading()
uni.showToast({
title: '提交成功'
})
setTimeout(() => {
uni.switchTab({
url: '/pages/tabbar/my/my'
})
}, 2000)
}).catch(err => {
uni.hideLoading()
uni.showToast({
title: '提交失败',
})
})
}
}
}
https://mall.qxtmall.top/api/user/add_comment?is_json=1&unique_id=miniappFBGt5AVhr1kPF8Bn4&user_id=126910&token=d1f8c2339b4365df14c74bd28a502bee&oauth=miniapp&is_anonymous=0&goods_rank=5&service_rank=5&deliver_rank=5&content=222222&goods_id=6398&order_id=255485&rec_id=209063&item_id=&img%5Bimg%5B0%5D%5D=https%3A%2F%2Ffiles.qxtmall.top%2Ftemp%2F20220214%2F52c75e15748b21ed89787367059283a06d5ea1df.png&img%5Bimg%5B1%5D%5D=https%3A%2F%2Ffiles.qxtmall.top%2Ftemp%2F20220214%2F326a6dd1fabd6959d8010024649c540687438a51.png
</script>
<style lang="scss">
.feedback-image-box {
display: flex;
flex-wrap: wrap;
padding: 10px;
.feedback-image-item {
position: relative;
width: 33.33%;
height: 0;
padding-top: 33.33%;
box-sizing: border-box;
.close-icon {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
right: 0;
top: 0;
width: 22px;
height: 22px;
border-radius: 50%;
background-color: #ff5a5f;
z-index: 2;
}
.image-box {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 5px;
right: 5px;
bottom: 5px;
top: 5px;
border: 1px #eee solid;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
}
}
</style>