微信小程序选项卡功能开发步骤与方法全解析
466
2023-11-13
微信小程序实现上传图片
本文实例为大家分享了微信小程序实现上传图片的具体代码，供大家参考，具体内容如下
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//wxml <button class=button bingtap="uploadSomeMsg">上传</button>
<view class="uploadImgBox">
<view class=smallImgBox>
<block wx:for="{{img_arr}}" wx:key="index">
<view class=logoinfo>
<image class=logoinfo mode="aspectFill" src={{item}} data-index="{{index}}" bindtap="previewImg"
bindlongpress="deleteImg" name="headimage" ></image>
</view>
</block>
<image bindtap=getLocalityImg class=moreImg src="../../images/uploadPictures.png">
</image>
</view>
<view>
</view>
</view>
?
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
32
33
34
//wxss
.uploadImgBox {
margin: 30rpx 0;
}
.logoinfo {
height: 180rpx;
width: 180rpx;
margin: 10rpx ;
}
.smallImgBox {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(2,180rpx);
grid-gap:20rpx 10rpx;
}
.moreImg {
border-radius: 10rpx;
height: 180rpx;
width: 180rpx;
margin: 20rpx ;
}.button{
height: 90rpx;
width: 270rpx;
font-size: 38rpx;
background-color: rgba(146, 163, 45, 0.288);
font-weight: 600;
color: white;
}
button::after {
border: none;
}
#转换成base64格式
?
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
32
33
34
35
36
37
//1__转换本地上传图片
//如果需要上传base64格式图片到后端,可以在上传图片时可以这样转换,其它的和普通接口上传数据一样
//转换结果
let data=wx.getFileSystemManager().readFileSync(res.tempFilePaths[0], "base64")
//`data:image/png;base64,${data}`
//上传时只需要在转换结果前加一个: `data:image/png;base64,${data}` ,就是完整的图片数据啦
//2__转换服务器网络图片为base64
images.forEach(url => {
let newUrl = `https://dx.showweb-/upload${url}` //需拼上前缀才能-网络图片
this.imageToBase(newUrl).then((res)=>{
this.data.img_arr.push(res)
this.setData({
img_arr:this.data.img_arr
})
})
})
imageToBase(img) {
return new Promise((resolve, reject)=>{
wx.downloadFile({ //先-图片
url: img,
success(res) {
if (res.statusCode === 200) {
wx.playVoice({
filePath: res.tempFilePath //选择图片返回的相对路径
})
resolve(res.tempFilePath)
}
}
})
})
},
以上就
您可能感兴趣的文章:微信小程序实现上传图片功能微信小程序上传图片功能（附后端代码）微信小程序多张图片上传功能微信小程序实现文件、图片上传功能微信小程序实现上传图片的功能微信小程序图片上传以及内容安全审核详解
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~