如何在 React 的本地文件夹中保存图像并返回路径

Posted 2023-02-18

【中文标题】如何在 React 的本地文件夹中保存图像并返回路径

【英文标题】：How to Save Image in local Folder in React And Return Path

【发布时间】：2020-06-25 06:50:11

【问题描述】：

我有一个反应应用程序，我从 API 获取项目数据。 我有图像上传器，可以将图像保存为字节数组并将其发送到后端。但是我想将图像保存在任何本地文件夹（例如资产）和返回路径中，然后我将路径发送到后端，请指导我该怎么做？

//#region onChangeMainImage
    onChangeMainImage(e) 
        const file = e.target.files[0];
        return new Promise((resolve, reject) => 
            const reader = new FileReader();
            reader.onload = (event) => 
                resolve(event.target.result);
                this.setState( MainImage: event.target.result.split(',')[1] )
                var type = event.target.result.split('/')[1];

                this.setState( filetype: type.split(';')[0] )
                //this.setState(file:event.target.result)
            ;
            reader.onerror = (err) => 
                reject(err);
            ;
            reader.readAsDataURL(file);
        );

    ;
    //#endregion

   <FormGroup title="MainImage" >

                                            <input
                                                name="Avatar"
                                                id="img"
                                                type="file"
                                                class="form-control"
                                                onChange=e => this.onChangeMainImage(e)
                                            ></input>

                                        </FormGroup>

【参考方案1】：

无法在网络中写入本地

我想将图像保存在任何本地文件夹中

如果网站可以使用 JS 写入您的本地设备，那么这将是一个巨大的安全风险，因此在节点环境之外是不可能的。

但是如果你是用electron什么的做桌面应用，就得使用node环境和node库“文件系统”fs，来保存文件。