从输入中获取图像并将其发送到服务器JavaScript React App的最佳方式

Question

我正在寻找一种解决方案，从输入中获取图像，转换并将其发送到服务器。

我正在使用React.js作为前端，使用Node.js + Postgresql作为后端。

当我拍摄尺寸较小的图像时，转换为base64并将base64存储在数据库中没有问题。但是对于高分辨率图像，数据库告诉我请求太大而我需要压缩它。

所以我需要另一种方法来存储图像，因为我不认为将图像转换为base64是有效的，并且是一种在处理高分辨率图像时压缩它的方法。

目前，我使用这种方法，但正如我之前解释的那样，我不认为这种方法是有效的，并且高分辨率的图像服务器告诉我请求太长。

前端：我选择图像的组件：

<InsertItemComponent
  name={"UPDATE IMAGE"}
  cName={"input-file"}
  req={false}
  tType={"file"}
  onChange={this.handleImage}
 accept={".jpg, .jpeg, .png"}
/>

InsertItemComponent类是一个简单的inputField，其类型为'file'函数handleImage：

handleImage = e => {

    e.preventDefault();
    let reader = new FileReader();
    let file = e.target.files[0];

    reader.onloadend = () => {
        this.setState({
            image: reader.result,
            imgchange: true
        });           
    }

    reader.readAsDataURL(file); 

}

然后在用户单击按钮发送新修改时将其发送到服务器

在我的数据库中，图像有文本类型，在我的服务器中，我只是更新当前图像。

Answer 1

您可以将multipart/form-data请求中的图像发送到您的服务器。

然后，您的服务器从请求中获取映像，并根据您的需要将其保存到Memory或DiskStorage。看看Multer图书馆。

Multer是一个Node.js中间件，用于处理多部分/表单数据，主要用于上传文件。

https://github.com/expressjs/multer