很多人在本地开发微信支付或者微信小程序,由于需要公网域名地址进行回调,没办法只能使用内网穿透工具,我这里使用的是免费的巴比达内网穿透。
在微信小程序中上传图片通常涉及使用wx.chooseImage
选择图片,然后使用wx.uploadFile
将图片上传到服务器。以下是一个简单的示例代码,展示了这一过程:
1. 选择图片
首先,你需要在小程序页面的JS文件中定义一个函数,用于让用户选择图片:
chooseImage: function() {
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: (res) => {
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths;
this.uploadImage(tempFilePaths[0]);
}
});
},
2. 上传图片至服务器
接着,定义一个uploadImage
函数来上传选中的图片到服务器。这里以POST方法为例,使用wx.uploadFile
完成上传:
uploadImage: function(filePath) {
wx.showLoading({
title: '上传中...',
});
const uploadTask = wx.uploadFile({
url: 'http://your-babida-public-url/api/upload', // 巴比达映射后的公网URL
filePath: filePath,
name: 'image', // 对应服务器接收图片字段名
formData: {
// 其他额外参数,如用户标识等
'user': 'test_user'
},
success: (res) => {
wx.hideLoading();
if (res.statusCode === 200) {
const data = JSON.parse(res.data);
console.log('图片上传成功', data);
// 根据返回结果处理,例如提示用户或更新页面状态
} else {
wx.showToast({
icon: 'none',
title: '上传失败',
});
}
},
fail: (err) => {
wx.hideLoading();
wx.showToast({
icon: 'none',
title: '上传失败,请重试',
});
console.error('图片上传失败', err);
}
});
// 监听上传进度
uploadTask.onProgressUpdate((res) => {
console.log('上传进度', res.progress);
console.log('已经上传的数据长度', res.totalBytesSent);
console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend);
});
},
这段代码中,wx.chooseImage
用于弹出选择图片的对话框,用户可以选择一张图片。然后,通过wx.uploadFile
将选中的图片上传到指定的服务器地址。注意,你需要将URL替换为你通过巴比达映射得到的公网URL,并根据你的服务器接口要求调整name
和formData
的内容。