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数据库的Schema看起来像这样

    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控制器

    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 获取方法将文件上传到服务器，同时将请求 Content-Type 设置为application / json。请求必须是 multipart / form-data 类型。

让我们为html表单指定一个id以便于参考：

<form id="myform" ...

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

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

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

body: new FormData(form)

第二个问题（服务器端）

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

我们可以在请求文件对象上访问上传的图像数据。我们将通过缓冲区属性获取图像二进制数据。

pic1: req.file.buffer,

第三个问题（反应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);

然后我们附加输入字段的 rest ：

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

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

body: formData

无法将图片上传到postgres数据库

1 个答案: