首页JS 多个图片通wx.getLocalImgData转换，全部保存到formData 再通过ajax上传

JS 多个图片通wx.getLocalImgData转换，全部保存到formData 再通过ajax上传

时间: 2024-10-01 21:05:54 浏览: 54

在JavaScript中，如果你想将多个图片通过`wx.getLocalImgData`获取本地图片数据，并将它们合并到一个FormData对象以便通过Ajax上传，可以按照以下步骤操作： 1. **获取单个图片的本地数据**：首先，你需要分别对每个图片调用`wx.getLocalImgData`，它接收一个`imgSrc`作为参数。例如： ```javascript wx.getLocalImgData({ src: img1Src, success(res) { let dataUrl1 = res.localId; // 将图片URL添加到formData formData.append('image1', dataUrl1); }, fail(err) { console.error('获取图片失败:', err); } }); ``` 2. **处理所有图片**：对于多个图片，你可以循环这个过程，替换`img1Src`为其他图片的路径： ```javascript const images = ['img1', 'img2', 'img3']; // 图片数组 images.forEach(img => { // 使用当前图片路径 let imgSrc = `images/${img}.jpg`; // ... (上面的代码块) }); ``` 3. **创建FormData对象**：当所有的图片数据都添加完成后，创建一个FormData实例并将其提交给Ajax请求： ```javascript const formData = new FormData(); formData.append('allImages', JSON.stringify([...formData.entries()])); // 序列化formData // 发起Ajax请求 axios.post(uploadUrl, formData, { headers: {'Content-Type': 'multipart/form-data'} }) .then(response => { console.log('图片上传成功:', response.data); }) .catch(error => { console.error('上传失败:', error); }); ``` 4. **注意兼容性**：如果需要兼容非微信环境的Ajax库，比如原生的XMLHttpRequest或者第三方库如jQuery的`$.ajax`，记得处理好不同库的`FormData`支持。

阅读全文