JS 多个图需要上传,但图片需要wx.getLocalImgData转换,转换后通过formData ajax上传
时间: 2024-09-30 16:12:02 浏览: 34
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
在JavaScript中,如果你需要处理微信环境下的多个图片上传,通常会涉及到以下几个步骤:
1. **获取本地图片**:使用`wx.getLocalImgData()`函数获取用户选择的图片,这个函数接收一个回调函数作为参数,当图片读取完成时,回调会被触发,并提供一个包含图片数据的对象。
```javascript
wx.chooseImage({
count: 9, // 可选,默认9,最多选9张
sizeType: ['original', 'compressed'], // 可选,返回的图片规格 ["original", "compressed"]
sourceType: ['album', 'camera'], // 可选,可选值为"album"或"camera"
success: function(res) {
var tempIds = res.localIds; // 图片的临时ID列表
Promise.all(tempIds.map(imgId => wx.getLocalImgData({ localId: imgId }))).then(images => {
// images数组包含了每个图片的Base64编码或者其他格式的数据
});
}
})
```
2. **创建FormData**:对于每个图片,你需要将其转换成`FormData`对象,这是Ajax请求常用的格式,可以同时携带文本和其他二进制数据。
```javascript
images.forEach(image => {
let formData = new FormData();
formData.append('file', image.data, `image_${index}`); // 将图片数据添加到FormData,这里假设'image_' + index 是文件名
// 然后你可以继续将formData发送到服务器
})
```
3. **Ajax上传**:使用`XMLHttpRequest`或现代的fetch API,你可以发送POST请求并将`FormData`作为内容发送。
```javascript
let xhr = new XMLHttpRequest();
xhr.open('POST', '/api/upload');
xhr.onload = function() {
if (xhr.status === 200) {
console.log('Upload successful');
}
};
xhr.send(formData);
```
阅读全文