react图片预览增加下载按钮
发布网友
发布时间：2023-02-15 10:32
共5个回答
热心网友
时间：2023-10-06 15:58
import React, { useState } from 'react';
import { Button, Modal } from 'react-bootstrap';
const ImagePreview = () => {
const [show, setShow] = useState(false);
const [imgSrc, setImgSrc] = useState('');
const getImage = (e) => {
let reader = new FileReader();
const file = e.target.files[0];
reader.onloadend = () => {
setShow(true);
setImgSrc(reader.result)
}
reader.readAsDataURL(file);
}
const downloadImage = () => {
const link = document.createElement('a');
link.download = 'image';
link.href = imgSrc;
link.click();
}
return (
<>
<input type="file" onChange={getImage} />
<Modal show={show}>
<Modal.Body>
<img src={imgSrc} alt="image preview"/>
</Modal.Body>
<Modal.Footer>
<Button onClick={downloadImage}>Download Image</Button>
</Modal.Footer>
</Modal>
</>
)
}
export default ImagePreview;
热心网友
时间：2023-10-06 15:58
在react图片预览的基础上，增加一个下载按钮，给用户提供下载功能。
通常情况下，下载按钮可以是个图标在图片预览的左下角，或者在图片预览中加入一个按钮标签，点击图片，弹出下载框。
引入具体实现方法：
1. 使用React中的a标签，在图片预览容器中增加一个按钮，并将a标签中的href属性设置为图片地址，点击按钮即可下载该图片，代码如下：
```
<a download="xxx" href={imageUrl}>
下载按钮
</a>
```
2. 使用React中的file-saver模块，通过调用模块中的saveAs函数，实现图片的下载功能，具体代码如下：
```javascript
import FileSaver from 'file-saver';
handleDownloadClick()
热心网友
时间：2023-10-06 15:58
【react】点击按钮下载图片功能以及XMLHttpRequest的基本用法

Chic。
原创
关注
1点赞·277人阅读
图片下载点击事件
const handlerDown = (url: string, name: string) => {
const x = new XMLHttpRequest();
const resourceUrl = url;
x.open('GET', resourceUrl, true);
x.responseType = 'blob';
x.onload = function () {
const urls = window.URL.createObjectURL(x.response);
const a = document.createElement('a');
a.href = urls;
a.download = name + '.png';
a.click();
};
x.send();
};
登录后复制

调用图片下载功能
<Button
type="link"
size="middle"
onClick={() => handlerDown('https://www.baidu.com/', '测试测试') }
/>
登录后复制
XMLHttpRequest的基本用法
XMLHttpRequest是浏览器内置的一个构造函数。因此使用的时候需要 new 作用，基于 new 出来的 XMLHttpRequest 实例对象，可以发起 Ajax 的请求。
// 创建 xhr 对象
const xhr = new XMLHttpRequest();
// 调用 xhr.open() 函数
xhr.open('GET', 'https://www.baidu.com');
// 调用 xhr.send() 函数
xhr.send();
// 监听 load 事件
xhr.addEventListener('load', function() {
console.log('load事件');
});
登录后复制

GET请求携带参数
// 创建 xhr 对象
const xhr = new XMLHttpRequest();
// 调用 xhr.open() 函数 -- get参数
xhr.open('GET', 'https://www.baidu.com');
// 调用 xhr.send() 函数
xhr.send();
// 监听 load 事件
xhr.addEventListener('load', function() {
console.log('load事件');
});
登录后复制

POST请求携带参数
// 创建 xhr 对象
const xhr = new XMLHttpRequest();
// 调用 xhr.open() 函数
xhr.open('POST', 'https://www.baidu.com');
// 调用 xhr.send() 函数
// 设置头部信息
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('');
// 监听 load 事件
xhr.addEventListener('load', function() {
console.log('load事件');
});
登录后复制

responseType
XMLHttpRequest.responseType 属性是一个枚举类型的属性，设置返回响应数据的类型。
react.js
javascript
前端


点赞文章给优秀博主打call~
新款凉鞋，上脚舒适不累脚，现在下单超划算
精选推荐
广告

热心网友
时间：2023-10-06 15:59
const handlerDown = (url: string, name: string) => {
const x = new XMLHttpRequest();
const resourceUrl = url;
x.open('GET', resourceUrl, true);
x.responseType = 'blob';
x.onload = function () {
const urls = window.URL.createObjectURL(x.response);
const a = document.createElement('a');
a.href = urls;
a.download = name + '.png';
a.click();
};
x.send();
};
登录后复制
调用图片下载功能
<Button
type="link"
size="middle"
onClick={() => handlerDown('https://www.baidu.com/', '测试测试') }
/>
登录后复制
XMLHttpRequest的基本用法
XMLHttpRequest是浏览器内置的一个构造函数。因此使用的时候需要 new 作用，基于 new 出来的 XMLHttpRequest 实例对象，可以发起 Ajax 的请求。
// 创建 xhr 对象
const xhr = new XMLHttpRequest();
// 调用 xhr.open() 函数
xhr.open('GET', 'https://www.baidu.com');
// 调用 xhr.send() 函数
xhr.send();
// 监听 load 事件
xhr.addEventListener('load', function() {
console.log('load事件');
});
登录后复制
GET请求携带参数
// 创建 xhr 对象
const xhr = new XMLHttpRequest();
// 调用 xhr.open() 函数 -- get参数
xhr.open('GET', 'https://www.baidu.com');
// 调用 xhr.send() 函数
xhr.send();
// 监听 load 事件
xhr.addEventListener('load', function() {
console.log('load事件');
});
登录后复制
POST请求携带参数
// 创建 xhr 对象
const xhr = new XMLHttpRequest();
// 调用 xhr.open() 函数
xhr.open('POST', 'https://www.baidu.com');
// 调用 xhr.send() 函数
// 设置头部信息
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('');
// 监听 load 事件
xhr.addEventListener('load', function() {
console.log('load事件');
});
登录后复制
responseType
XMLHttpRequest.responseType 属性是一个枚举类型的属性，设置返回响应数据的类型。
react.js
javascript
前端
热心网友
时间：2023-10-06 16:00
