. 前言
我们将使用微信小程序的`wx.uploadFile`方法来实现用户上传图片的功能。
2. 需求
博主需要开发一个用户投诉页面，用户可以上传最多三张图片，并将这些图片、文字和用户信息一起提交给服务器。
3. 解决思路
我们将使用`wx.uploadFile`方法来实现图片上传功能。
4. 代码展示
首先，在页面的初始化数据中，我们需要定义两个数组：`imgs`用于存储要上传的图片列表，`imgPath`用于存储已上传成功的图片路径。
```javascript
Page({
data: {
imgs: [], // 上传图片列表
imgPath: [], // 已上传成功的图片路径
},
})
```
接下来，我们编写上传图片的函数。在这个函数中，我们将使用`wx.chooseImage`方法让用户选择图片，然后使用`wx.uploadFile`方法将选中的图片上传到服务器。
```javascript
Page({
// ...其他代码
uploadImages() {
const that = this;
wx.chooseImage({
count: 3, // 最多上传3张图片
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths;
that.setData({ imgs: tempFilePaths });
that.uploadFiles(tempFilePaths);
},
fail: function (err) {
console.log('上传失败', err);
},
});
},
})
```
最后，我们编写`uploadFiles`函数，该函数接收一个包含已上传成功图片路径的数组，并将其与用户信息一起提交给服务器。
```javascript
async function uploadFiles(filePaths) {
for (let i = 0; i < filePaths.length; i++) {
try {
const filePath = filePaths[i];
const result = await wx.cloud.uploadFile({ cloudPath: 'images/' + (i + 1), filePath }); // 将文件上传到云服务器的images文件夹下，文件名按顺序递增1
const imageUrl = result.fileID; // 获取文件在云服务器上的URL地址
const formData = new FormData(); // 根据表单提交方式创建表单对象
Object.keys(this.data).forEach((key) => { // 将数据添加到表单对象中，注意data中的字段需要与后端接口一致
formData.append(key, this.data[key]);
});
formData.append('image', imageUrl); // 将图片URL地址添加到表单对象中，与后端接口一致即可
const serverUrl = 'https://example.com/api/submit'; // 将此URL替换为实际的后端接口地址
const response = await wx.request({ url: serverUrl, method: 'POST', data: formData }); // 通过POST请求将数据提交给后端接口，注意url和method需要根据实际情况进行修改
console.log('提交成功', response); // 在控制台输出服务器返回的数据，如果有错误可在此进行处理或提示用户操作不成功的原因
} catch (error) {
console.error('上传失败', error); // 在控制台输出错误信息，方便调试和分析问题原因
} finally {
i++; // 继续上传下一张图片，循环执行uploadFiles函数即可实现多张图片同时上传的功能。
以下是重构后的代码：
```javascript
// 上传照片 chooseImg (e) {
const _this = this;
let imgs = this.data.imgs;
let imgNumber = this.data.imgs.length; //当前已上传的图片张数
if (imgNumber >= 3) {
FN.Toast("超出上传个数");
return false;
} else {
imgNumber = 3 - imgNumber;
};
wx.chooseImage({ //打开本地相册选择图片
count: imgNumber,
sizeType: ["original", "compressed"],
sourceType: ["album", "camera"],
success(res) {
const tempFilePaths = res.tempFilePaths;
for (let i = 0; i < tempFilePaths.length; i++) {
imgs.push(tempFilePaths[i]);
}
_this.setData({ //赋值，回显照片
imgs: imgs
});
let successUp = 0; //成功
let failUp = 0; //失败
let count = 0; //第几张
let length = tempFilePaths.length; //总数
_this.recursionUploading(tempFilePaths, successUp, failUp, count, length); //调用上传方法
}
})
},
recursionUploading(tempFilePaths, successUp, failUp, count, length) {
if (count === length) {
return;
} else {
wx.uploadFile({
url: 'your upload url', //你的上传地址
filePath: tempFilePaths[count],
name: 'file', //文件对应表单字段名
formData: {
'user': 'test' //其他额外的表单数据
},
success(res) {
console.log("success", res); //上传成功后的操作，比如更新成功上传的数量等操作。可根据实际情况修改。
successUp++; //上传成功数量加1,用于判断是否所有图片都已经上传完成。可根据实际情况修改。
}
}).catch((err) => {
console.log("error", err); //上传失败后的操作，比如更新失败上传的数量等操作。可根据实际情况修改。 FAILURE UP++; //上传失败数量加1,用于判断是否所有图片都已经上传完成。可根据实际情况修改。 });
}
}
```
以下是重构后的内容：
```
// 采用递归的方式上传图片
function recursionUploading(imgPaths, successUp, failUp, count, length) {
var _this = this;
wx.showLoading({
title: `正在上传第${count}张`
});
wx.uploadFile({
url: `${app.globalData.baseURL}/api接口地址`,
filePath: imgPaths[count],
formData: {
userId: app.globalData.userMsg.userId
},
name: 'uploadImage',
header: {
'content-type': 'multipart/form-data'
},
success(e) {
_this.setData({
imgPath: [..._this.data.imgPath, e.data]
}); // 将成功上传的图片路径添加到imgPath数组中
successUp++; // 成功+1
_this.handleUploadSuccess(); // 调用处理成功上传的方法
},
fail(e) {}, // 如果上传失败，暂时不做处理
complete() {}, // 如果上传完成，暂时不做处理
});
}
```
您好，根据您的需求，您可以使用微信小程序提供的API来实现预览大图的功能。具体来说，您可以使用`wx.previewImage()`方法来实现这个功能。下面是一个简单的示例代码：
```javascript
lookBigImg (e) {
let index = e.currentTarget.dataset.index; //索引
let big = this.data.imgs[index];
wx.previewImage({
current: big, // 当前显示图片的http链接
urls: this.data.imgs // 需要预览的图片http链接列表
});
}
```
