将https://jsksmacii.foxconn.com/webServiceCall/H5/TransferWarehouese/image/下面的图片解析到数组中
时间: 2024-09-24 22:27:32 浏览: 86
解析远程URL中的图片并将它们转换为本地存储或数组通常是通过网络请求和图像处理技术来实现的。在JavaScript环境中,我们可以使用fetch API或者axios库来进行HTTP GET请求,然后使用FileReader对象来读取并处理图像数据。以下是使用fetch API的一个简单示例:
```javascript
let imageUrlArray = [];
const baseUrl = "https://jsksmacii.foxconn.com/webServiceCall/H5/TransferWarehouese/image/";
async function fetchAndParseImages(directoryUrl) {
const response = await fetch(directoryUrl + '/*'); // 获取目录下所有图片
if (!response.ok) {
throw new Error('Failed to fetch images');
}
const imageElements = await response.blob().then(blob => {
return new Response(blob).body; // 转换为ReadableStream
});
for await (const imageData of imageElements) {
const file = await imageData.text(); // 假设是文本格式,如果是二进制则需使用file()函数
const fileName = file.split('\n').shift(); // 提取文件名
imageUrlArray.push({ name: fileName, data: file }); // 存储文件名和内容
}
}
fetchAndParseImages(baseUrl)
.catch(error => console.error('Error:', error))
.finally(() => {
console.log(imageUrlArray); // 输出解析后的图片数组
});
```
在这个例子中,我们假设目录下的图片是以文本形式列出的,每行一个文件名。实际操作中,如果图片是以二进制格式返回的,你需要使用`imageData.arrayBuffer()`代替`imageData.text()`。
注意,这种做法可能会有性能问题,特别是对于大量文件或大型图片。对于这种情况,你可能需要考虑分块下载或使用更专业的库,如`axios-retry`来优化请求。
阅读全文