随笔 - 26  文章 - 0  评论 - 0  阅读 - 12383

上传图片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   阿术阿术  阅读(1785)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示