微信小程序--uploadFile上传图片及踩坑 - WALL*E
发布时间:2021-09-21 09:12:59作者:顺晟科技点击:
判断后台获取有没有用户头像
<view bindtap="uploadImage" class="vieimg">
<image wx:if="{{UserImg}}" src="{{UserImg}}"></image>
<image wx:else src="/images/icon-boy.png"></image>
</view>
微信开发者工具有上传文件的方法
方法 wx.chooseImage
里边的参数有 count
为最多可已选择的图片总数,sizeType
指定原图还是压缩图片,默认是二者都有,sourceType
指定来源是相册还是相机,默认二者都有。代码如下:
wx.chooseImage({
count: 1,
sizeType: [\'compressed\'],
sourceType: [\'album\', \'camera\'],
success: function (res) {
var tempFilePaths = res.tempFilePaths;
wx.getFileSystemManager().readFile({
filePath: tempFilePaths[0],
encoding: \'base64\',
success: function(res) {
var base64Img = \'data:image/png;base64,\' + wx.arrayBufferToBase64(base)
that.setData({
UserImg : tempFilePaths[0] //创建一个object URL,并不是你的本地路径
})
}
})
},
fail: function (res) {}
})
wx.getFileSystemManager().readFile({})
将获取到的图片文件转为base64
之前一直疑惑把图片存储到数据库中,怎么返回一个名称并且通过这个名称到文件中查找,后来发现C#中有接收文件的方法,可以到我上个随笔中看看 ➡️ C#接收前端上传图片 。
接着继续上传到后端,微信小程序给出了一个上传文件的方法wx.uploadFile({}})
里边的参数和平常使用的有些出入
wx.uploadFile({
url: url,//接口地址
name: \'uploadfile_ant\',//文件类型
filePath: tempFilePaths[0],//为文件地址
formData: { //其他要传输给后端的数据,在这里不用传文件
\'id\':UserImgid
},
success: function (res) {
if(res.data==""){
wx.showModal({
title: \'提示\',
content: "图片上传类型错误,当前支持jpg、png、bmp、jpeg、gif",
showCancel: false
});
}
//可以把后端传过来的已经成功的图片显示在页面上,注意url为你后端的文件存放地址
that.setData({
\'UserImg\': url+res.data.UserImg
})
wx.setStorageSync(\'UserImg\', url+res.data.UserImg);
},
fail: function (res) {
wx.showModal({
title: \'错误提示\',
content: "错误",
showCancel: false,
success: function (res) { }
})
}
})
踩坑:测试和本地调试都可以,发布后在手机上就不行,解决方法:
注意 wx.uploadFile
方法在发布前要在 微信小程序开发平台 页面配置,
在开发者工具里边
到这里基本上就结束了。
- 上一篇 : 微信小程序wx.uploadFile的两个坑
- 下一篇 : 初学微信小程序开发—文件解析错误的解决办法