上传图片uni.chooseMedia,uniapp,微信小程序

<view @click="previewImage(index)" v-for="(item,index) in noticeList.images" :key="index"  class="" style="position: relative; overflow-x: scroll;white-space: nowrap;display: inline-block;">
                        <image style="margin-right: 20rpx;width: 200rpx" :src="item" class="addpic">
                        </image>
                        <view class="delpicbtn" @tap.stop="delpicbtn(index)" :index="index">
                            <image src="/static/imgs/guanbi.png" mode=""></image>
                        </view>
            </view>
            <view class="addpic_wrap" @click="addpic">
                <view class="addpic"></view>
                <text class="textmid">添加图片</text>
            </view>
// 上传图片
            addpic() {
                uni.chooseMedia({
                    success: (res) => {
                        for (let i = 0; i < res.tempFiles.length; i++) {
                            uni.uploadFile({
                                url: BASE_URL.host + '/user/createImage',
                                name: 'image',
                                filePath: res.tempFiles[i].tempFilePath,
                                method: 'POST',
                                header: {
                                    'token': uni.getStorageSync('token')
                                },
                                success: (res) => {
                                    console.log(JSON.parse(res.data).data);
                                    console.log('上传图片', );
                                    this.noticeList.images.push(JSON.parse(res.data).data)
                                },
                                fail: (err) => {
                                    console.log(err);
                                },
                            })
                        }
                    }
                })
            },
            // 删除图片
            delpicbtn(index){
                console.log(index);
                this.noticeList.images.splice(index,1)
            },
.delpicbtn{
    background-color: rgba(0, 0, 0, .5);
    position: absolute;
    top:0;
    left: 150rpx;
    width: 50rpx;
    height: 50rpx;
    text-align: center;
    border-radius: 50%;
    overflow: hidden;
}
.delpicbtn>image{
        margin-top: 10rpx;
    width: 30rpx;
    height: 30rpx;
}
    .addpic_wrap {
        position: relative;
        min-width: 200rpx;
    }

 

posted on 2022-07-12 19:02  阿术阿术  阅读(1624)  评论(0编辑  收藏  举报