关于uniapp:uniapp点击上传图片后清除原来的图片数据

12次阅读

共计 2305 个字符,预计需要花费 6 分钟才能阅读完成。

执行步骤:
点击“上传图片”按钮弹出弹窗,抉择图片点击“确定”图片上传胜利后弹窗敞开,再点击上传图片会发现弹窗会保留有上次选中图片的数据。
开发要求:
图片上传胜利后默认革除上一次选中上传的图片数据。

解决办法:

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

正文完
 0