前端怎么把用户下载的图片下载到src/asserts/image目录下,就是不和后端交互,只有前端工作
时间: 2024-01-22 13:01:52 浏览: 29
前端是无法直接将用户下载的图片保存到服务器上的,因为浏览器的安全限制禁止前端直接访问用户的本地文件系统。但是,你可以通过将用户下载的图片转换成 Base64 编码的字符串,然后将该字符串作为图片的 src 属性值来显示图片。
如果你想要将 Base64 编码的图片保存到本地的 src/asserts/image 目录下,可以使用以下步骤:
1. 将 Base64 编码的图片字符串转换成 Blob 对象:
```javascript
const base64Image = 'data:image/png;base64,iVBORw0KG...';
const blob = dataURItoBlob(base64Image);
function dataURItoBlob(dataURI) {
const byteString = atob(dataURI.split(',')[1]);
const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
const ab = new ArrayBuffer(byteString.length);
const ia = new Uint8Array(ab);
for (let i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ab], { type: mimeString });
}
```
2. 创建一个文件对象:
```javascript
const file = new File([blob], 'image.png', { type: 'image/png' });
```
3. 创建一个 FormData 对象,将文件对象添加进去:
```javascript
const formData = new FormData();
formData.append('file', file);
```
4. 发送一个 POST 请求到服务器,将 FormData 对象发送到后端:
```javascript
const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/save-image', true);
xhr.send(formData);
```
后端接收到请求后,将文件保存到 src/asserts/image 目录下即可。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)