上传图片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; }
分类:
uniapp
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了