使用FileSaver下载图片
cnpm file-saver 安装依赖包
import React, { Component } from 'react'
import { saveAs } from 'file-saver';
import '../App.css'
var FileSaver = require('file-saver');
export default class DownImg extends Component {
constructor(props) {
super(props)
this.state = {
files: [
{
id: 5977,
fileUri: 'http://uchuan.oss-cn-beijing.aliyuncs.com/img/20211118/1f5d51e98f2b00bdbdb5b4d5a433d534.jpg'
},
{
id: 5978,
fileUri: 'http://uchuan.oss-cn-beijing.aliyuncs.com/img/20211118/c14bb570324ea5a0625ef3caaf4cc5d5.jpg'
},
{
id: 5979,
fileUri: 'http://uchuan.oss-cn-beijing.aliyuncs.com/img/20211118/d2d8561367e6197516837d89f638a33e.jpg'
}
]
}
}
downFiles = () => {
console.log(11111)
console.log(this.state.files)
let { files } = this.state
files.map(e => {
let fileName = e.id + Date.parse(new Date()) + '.png'
FileSaver.saveAs(e.fileUri, fileName);
})
}
render() {
let { files } = this.state
return (
<div>
{
files.map((e, i) => {
return (
<img className='files-img' src={e.fileUri} alt="" key={e.id} />
)
})
}
<div onClick={() => this.downFiles()}>下载</div>
</div>
)
}
}