react图片预览增加下载按钮

// 利用React实现图片预览功能，并在预览图片上添加下载按钮：

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

a标签的链接地址指向一个文件（如：download.php），并把要下载的文件的标示符（如id）传给该文件（如：download.php?id=xx）

download.php文件里代码类似于：

//获取传递进来的id，并赋给变量$id

$id = $_GET['id']

//从数据库获取文件信息，并做一些安全检测

//如判断$id是否存在

//判断该文件是否存在于服务器，等等

……

$filename = 路径+实际文件名

//指定文件的类型，如

header('Content-type: application/pdf')

//最后

header('Content-Disposition: attachment filename="$filename"')

readfile("$filename")

exit()

download是a标签html5的新属性，可以点击下载文件，初次使用，经常会出现无法点击的情况，可能有以下原因，排除下：

必须设置href属性，download才起作用；

download属性是文件名，href属性，指向的是要下载的文件；

href的指向需要同源，跨域下载不下来，当然可以通过其他方案，比如把图片传到自己后台，再返回同源的路径。

---