React 下载多张图片到本地

使用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>
        )
    }
}