node.js - 无法上传图片到postgres数据库

Question

我在前端使用 React.js，在后端使用 Express.js API 来创建一个简单的博客。我正在为博客添加一个功能，可以上传图片和文件。我不断收到此错误。

{ error: invalid input syntax for type bytea
at Connection.parseE (C:\Users\Sophin\desktop\testingpostg\node_modules\pg\lib\connection.js:546:11)
at Connection.parseMessage (C:\Users\Sophin\desktop\testingpostg\node_modules\pg\lib\connection.js:371:19)
at Socket.<anonymous> (C:\Users\Sophin\desktop\testingpostg\node_modules\pg\lib\connection.js:114:22)
at emitOne (events.js:96:13)
at Socket.emit (events.js:188:7)
at readableAddChunk (_stream_readable.js:176:18)
at Socket.Readable.push (_stream_readable.js:134:10)
at TCP.onread (net.js:547:20)
name: 'error',
length: 93,
severity: 'ERROR',
code: '22P02',
detail: undefined,
hint: undefined,
position: '110',
internalPosition: undefined,
internalQuery: undefined,
where: undefined,
schema: undefined,
table: undefined,
column: undefined,
dataType: undefined,
constraint: undefined,
file: 'varlena.c',
line: '297',
routine: 'byteain' }
POST /api/learning 400 69.873 ms - 131

---

这是我在 React.js 中的表单

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import LearningFirstComp from './components/LearningFirstComp';

class App extends Component {
 constructor(props) {
  super(props);
  this.state={
    inputTopValue:'',
    inputBottomValue:'',
    inputImageValue:{},
  }
  this.handleTopChange = this.handleTopChange.bind(this);
  this.handleBottomChange = this.handleBottomChange.bind(this);
  this.handleImageChange = this.handleImageChange.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this);
}

handleTopChange(event) {
    this.setState({inputTopValue: event.target.value});
    console.log("changing")
}

handleBottomChange(event) {
    this.setState({inputBottomValue: event.target.value});
    console.log("descr")
}

handleImageChange(event) {
  this.setState({inputImageValue: event.target.value})
  console.log("imagechanged")
}

handleSubmit(event) {
    event.preventDefault();
    fetch('api/learning', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
            topstuff: event.target.topstuff.value,
            bottomstuff: event.target.bottomstuff.value,
            pic1: event.target.myimage.value
        })
    })
}

render() {
 return (
  <div className="App">
    <form onSubmit={this.handleSubmit} encType="multipart/form-data">
      <input type="text" name="topstuff" placeholder="title" onChange={this.handleTopChange} value={this.state.inputTopValue} /> <br/>
      <input type="text" name="bottomstuff" placeholder="body" onChange={this.handleBottomChange} value={this.state.inputBottomValue} /><br/>
      <input type="file" name="myimage" onChange={this.handleImageChange} value={this.state.inputImageValue} /><br/>
      <input type="submit" value="Submit" />
    </form>
    <LearningFirstComp />

  </div>
  );
 }
}

export default App;

我尝试在表单中同时使用“enctype”和“encType”，但都不起作用。

---

我的 postgresql 数据库的架构如下所示

    CREATE TABLE IF NOT EXISTS learningtable (
     id BIGSERIAL PRIMARY KEY,
     topstuff VARCHAR(255),
     bottomstuff VARCHAR(255),
     pic1 bytea
     );

我想知道问题是不是因为错误的数据类型造成的？我抬头看到要上传小于 1 MB 的图片，我们通常应该在 postgresql 中使用数据类型“bytea”。

---

这是我的 Express.js 路线

    const express = require('express');
    const myrouter = express.Router();
    const controller = require('../controllers/learningController');
    const multer = require('multer');

    var storage = multer.diskStorage({
     destination: function (req, file, cb) {
       cb(null, 'uploads')
         }
       })

    var upload = multer({ storage: storage });

    myrouter.post('/', upload.single('myimage'), controller.create);

    module.exports = myrouter;

我在这里使用 multer 上传文件，我认为这里的一切都井然有序？

---

这是我的 Express.js Controller

    const LearningObject = require('../models/learningmodel');
    const controller = {};

    controller.create = (req, res) => {
      LearningObject.create({
        topstuff: req.body.topstuff,
        bottomstuff: req.body.bottomstuff,
        pic1: req.body.pic1,
        })
          .then(jsonAfterAdding => {
            res.json({
             message: 'okay',
             jsonAfterAdding: jsonAfterAdding
              });
          }).catch(err => {
        console.log(err);
        res.status(400).json(err);
         });
       };

    module.exports = controller;

最后，这是我的 Express.js 模型

    const db = require('../db/config');
    const LearningObject = {};

    LearningObject.create = (randomparam) => {
      return db.one (
       `INSERT INTO learningtable
        (topstuff, bottomstuff, pic1)
          VALUES ($1, $2, $3) RETURNING *
        `,
      [randomparam.topstuff, randomparam.bottomstuff, randomparam.pic1]
      );
    };

  module.exports = LearningObject;

如有任何帮助，我们将不胜感激。

Answer 1

第一个问题(客户端)

您正在尝试使用 Javascript Fetch 方法将文件上传到服务器，同时将请求 Content-Type 设置为 application/json。请求的类型必须是 multipart/form-data。

让我们为 html 表单分配一个 id 以便于引用:

<form id="myform" ...

现在我们需要获取表单元素并将其分配给一个变量:

var form = document.getElementById("myForm");

要将 fetch xhr 请求设置为 multipart/form-data Content-Type，我们需要将请求主体设置为绑定(bind)到表单元素的 FormData 对象:

body: new FormData(form)

第二个问题(服务端)

在 req.body 上访问上传的图片将不起作用。 Multer 的专长是多部分/表单数据请求，并且应用解析的请求主体与主体解析器中间件略有不同。

我们可以在请求的file对象上访问上传的图片数据。我们将通过 buffer 属性获取图像二进制数据。

pic1: req.file.buffer,

第三题(React DOM)

与浏览器 DOM 不同，React DOM 需要特殊处理。由于我们无法直接引用表单标签，因此我们需要将表单输入值存储在状态发生变化时。

在文件的情况下，存储文件输入值是不够的。我们还需要存储文件对象。由于我们只期望一个文件引用，我们将只获取数组中的第一个对象。

this.setState({inputImageValue: event.target.value, 
                inputImageFile: event.target.files[0]})

现在在 handleSubmit 事件函数中，我们构建我们的 FormData 对象并附加图像(附加顺序不重要):

var formData = new FormData();
formData.append('myimage', this.state.inputImageFile);

然后我们附加输入字段的其余:

formData.append('...', this.state...);

最后我们将 formData 分配给请求的主体:

body: formData