uniapp中上传图片并实时预览

明日之后

html

[JavaScript] 纯文本查看 复制代码

<view class="pop-contain">
        <scroll-view scroll-y class="item-contain">
                <view class="padding-sm">
                        <!-- <image :src="paidImgUrl"  mode=""></image> -->
                        <img class="paidImgCon" :src="paidImgUrl">
                        <view class="paid-btn" v-if="paidImgUrl==''" @click="insertImage">
                                上传
                        </view>
                        <view class="paid-btn" v-else @click="insertImage">
                                更新
                        </view>
                </view>
        </scroll-view>
        <view class="pop-paidImg">
                <view class="pop-paidImg-sure" @tap="cancelAddBtn">关闭</view>
        </view>
</view>

对应函数

[JavaScript] 纯文本查看 复制代码

insertImage() {
        let that = this;
        uni.chooseImage({
                count: 1,
                success: (res) => {
                        this.paidImgUrl="";
                        this.showLoading("图片上传中");
                        //上传文件的临时路径
                        console.log("that.paidDdid");
                        console.log(this.paidDdid)
                        const tempFilePaths = res.tempFilePaths;
                        uni.uploadFile({
                                url: that.api.FKJTUpload+"&ddid="+that.paidDdid,
                                filePath: tempFilePaths[0],
                                name: 'file',
                                success: (uploadFileRes) => {
                                        console.log("上传图片1111");
                                        console.log(uploadFileRes);
                                        uni.hideLoading();
                                        const back = JSON.parse(uploadFileRes.data);
                                        if(back.status=="0"){
                                                that.paidImgUrl = that.host+back.filepath[0];
                                                console.log(that.paidImgUrl);
                                        }else{
                                                that.showToast(back.msg)
                                        }
                                },
                                fail:() =>{
                                        uni.hideLoading();
                                        that.showToast("图片上传失败，请联系开发！")
                                }
                        });
                }
        })
},

图片上传的时候再带着参数，没有使用官方的

[JavaScript] 纯文本查看 复制代码

formData:{
        "ddid":that.paidDdidl
},

而是写在了URL里面
that.api.FKJTUpload+"&ddid="+that.paidDdid

2605280004

感谢大佬分享

帅清

#在这里快速回复#22222222222222222222222222222