react下载文件保存路径

react下载文件保存路径:第一步我们首先需要知道下载的文件存放在手机react路径下面，打开手机自带的文件管理。

02

第二步进去文件管理之后，点击本地。

03

第三步进去本地界面之后，点击内部存储。

04

第四步进去本地存储之后，下滑找到react文件夹，一般文件夹都是按字母排序的，首先找到t字母开头的文件夹，然后就比较容易找到react。

05

第五步进之后，找到react文件夹，这个文件夹是存放下载的文件的。

06

第六步进去react文件夹之后，可以看到应用下载的文件。

我们只要用content创建一个ObjectURL并赋值给aLink即可解决文件类型的限制问题。

文件的自动下载也挺好办，自己构建一个UI点击事件，再自动触发下，就能实现自动下载啦。

现在来看看最终代码：

代码如下:

function downloadFile(fileName, content){

var aLink = document.createElement('a')

var blob = new Blob([content])

var evt = document.createEvent("HTMLEvents")

evt.initEvent("click", false, false)//initEvent 不加后两个参数在FF下会报错, 感谢 Barret Lee 的反馈

aLink.download = fileName

aLink.href = URL.createObjectURL(blob)

aLink.dispatchEvent(evt)

}

现在，只要一调用downloadFile，文件就自动下载了

// 利用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

---