微信小程序wx.chooseImage选择图片并上传避坑/真机上传无效

微信小程序选择本地图片或者相机拍照并上传服务器需要用到以下两个方法：

1.wx.chooseImage(Object object)

从本地相册选择图片或使用相机拍照

2.wx.uploadFile(Object object)

将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求，其中 content-type 为 multipart/form-data

chooseImg() {
const that = this;
wx.chooseImage({
count: 6,
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success (res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths
for (let i = 0; i < tempFilePaths.length; i += 1) {
wx.uploadFile({
url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址
filePath: tempFilePaths[i],
name: 'file',
header: {
// 我的 HTTP 请求中需要token，视情况而定是否需要header
token: wx.getStorageSync('token') || '',
},
formData: { // HTTP 请求中其他额外的 form data
file: tempFilePaths[i],
},
success (res){
console.log(res);
// 上传成功后相关操作
},
fail() {
wx.showToast({
title: '上传失败，请重试', //弹框内容
icon: 'fail',
//弹框模式
duration: 2000
//弹框显示时间
})
},
})
}
},
})
},

避坑：
在项目转测后，发现选择图片之后不显示，但是使用调式模式时，就能显示，后来发现是使用uploadFile方法前，需要在小程序后台配置uploadFile的合法域名，配完后即可正常选择图片上传

最后

以上就是合适背包为你收集整理的微信小程序wx.chooseImage选择图片并上传避坑/真机上传无效的全部内容，希望文章能够帮你解决微信小程序wx.chooseImage选择图片并上传避坑/真机上传无效所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。