JS 多个图片通wx.getLocalImgData转换,保存到 formData 再见通过ajax上传
时间: 2024-09-30 17:12:07 浏览: 41
在JavaScript中,如果你想要将多个图片文件通过`wx.getLocalImgData`方法从微信小程序本地缓存获取,并将它们合并到一个FormData对象中,以便通过Ajax上传到服务器,可以按照以下步骤操作:
1. **获取图片**:
首先,对于每个图片,使用`wx.getLocalImgData`方法获取图片数据,这个方法接受一个imageId参数,返回一个Promise。例如:
```javascript
let imageDataPromises = [];
for (let i = 0; i < images.length; i++) {
imageDataPromises.push(wx.getLocalImgData({
localId: images[i].localId // 这里假设你已经存储了图片的本地ID
}));
}
```
2. **合并到FormData**:
等所有图片加载完毕后,你可以用`Promise.all`来同步等待所有请求结果,然后创建一个FormData实例,并将图片数据添加进去:
```javascript
Promise.all(imageDataPromises)
.then(results => {
let formData = new FormData();
results.forEach(result => {
formData.append('image', result.tempFilePath); // 使用tempFilePath作为键值
});
// 接下来你可以将formData发送到后端服务器
})
.catch(error => {
console.error('Failed to get image data:', error);
});
```
3. **通过Ajax上传**:
有了FormData,你可以使用fetch、axios或其他HTTP库发送POST请求,比如:
```javascript
axios.post('/api/upload', formData).then(response => {
console.log('Upload successful:', response.data);
}).catch(error => {
console.error('Upload failed:', error);
});
```
阅读全文