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 '文件' function 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是一个用于处理multipart / form-data的Node.js中间件主要用于上传文件。

https://github.com/expressjs/multer

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

1 个答案: