执行步骤:
点击“上传图片”按钮弹出弹窗,选择图片点击“确定”图片上传成功后弹窗关闭,再点击上传图片会发现弹窗会保存有上次选中图片的数据。
开发要求:
图片上传成功后默认清除上一次选中上传的图片数据。
解决方法:
<view class="pop-up1" @click="rule1=true">弹窗1</view>
<view class="sure_btn" @click="formData.type = 2;showOne()">
<p>上传图片</p>
</view>
</view>
<!-- 弹窗 -->
<view class="boxBm test_pop" v-if="isLower">
<view class="box2 share-state">
<image class="img_close" @click="closePop" src="../../../static/img/koreaActive/close.png" mode=""></image>
<view class="addImg">
<image class="" @click="addImg(),imgItem=true" src="../../../static/img/japanActive/upload.png" mode=""></image>
</view>
<textarea class="active_text" maxlength="1000" @input="getText" v-model="formData.remarks" placeholder="您尊贵的意见和建议......" />
<button type="default" @click='uploadImage()'>確定</button>
<view class="Img_box" v-if="imgItem" v-for="(item,index) in imgList" :key="index">
<image class="Img_item" :src="item" mode=""></image>
</view>
</view>
</view>
<script>
import api from '@/apis/api.js'
import URL from '@/common/config.js'
export default {
data() {
return {
token:'',
showShare: false,
isLower: false,
imgList:[],
List:'',
rule1:false,
formData: {
pic: "",
remarks:"",
type:0
},
}
},
async onLoad(e) {
if (e.lang) {
this.$i18n.locale = e.lang
this.lang = e.lang
} else {
this.lang = 'en'
}
console.log("eee",e)
await this.$onLaunched;
//获取浏览器缓存的token
this.token = localStorage.getItem('token')
},
methods: {
//弹出弹窗
showOne(){
this.showShare=true;
this.isLower = true;
// console.log('this.showShare',this.showShare)
},
//清除上一次选中的图片数据
closePop() {
this.formData = {
pic: "",
remarks:"",
type:0
}
this.imgList = []
this.List = []
this.isLower=false
},
//点击选择图片
addImg() {
uni.chooseImage({
count: 3, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['album'], //从相册选择
loop: true,
success: res => {
// console.log(res);
if (res.tempFilePaths.length != 0) {
this.imgList.push(res.tempFilePaths[0]);
}
var tempFiles = res.tempFiles[0];
uni.uploadFile({
url: URL.httpurl + '/api/common/upload',
file: tempFiles,
method: 'POST',
name: 'file',
header:{
token: this.token,
},
success: uploadFileRes => {
var data_ =JSON.parse(uploadFileRes.data)
console.log('data_',data_)
this.formData.pic = data_.data.url;
this.formData.pic = data_.data.url;
// console.log('上传图片', JSON.parse(uploadFileRes.data));
},
fail(err) {
console.log(err);
}
});
}
});
},
//点击“确定”上传图片
uploadImage(){
this.$apis.saveImg(this.formData)
.then(res => {
console.log(res)
uni.showToast({//提示
title: res.msg,
// lang:this.lang,
})
//执行清除数据方法
this.closePop()
})
}
}
</script>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。