执行步骤:
点击“上传图片”按钮弹出弹窗,选择图片点击“确定”图片上传成功后弹窗关闭,再点击上传图片会发现弹窗会保存有上次选中图片的数据。
开发要求:
图片上传成功后默认清除上一次选中上传的图片数据。
image.png
解决方法:

<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>

image.png


黑仔
4 声望0 粉丝

技术不在于广,而在于精!