javascript - 使用 react 和 node 不使用 req.files 上传图像

Question

我正在研究用于文件上传的 react/node。 我没有将文件传递到 API 请求中，而是传递到 API 请求的正文部分。 我的 react 代码就像，

import React, { Component } from 'react';
import request from 'superagent';

class App extends Component {
constructor(props) {
    super(props);
    this.state = {
        image1: '',
    };

    this.handleUploadFile = this.handleUploadFile.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
};

handleUploadFile = (event) => {
    console.log("event", event.target);
    this.setState({
        image1: event.target.files[0],
    });
}

handleSubmit(e) {
    e.preventDefault();
    const dataDemo = {
        image: this.state.image1,
    };

    request
       .post(API_URL)
       .set('Content-Type', 'application/json')
       .send(dataDemo)
       .end(function (err, res) {
         console.log("err", err);
         console.log("res", res);
       })
}

render() {
    return (
        <div>
            <form encType="multipart/form-data">
                <div style={{width: '100%', marginTop: '10px'}}>
                    Image 1
                    <input name="image1" type="file" onChange={this.handleUploadFile} />
                </div>

                <div style={{width: '100%', marginTop: '10px'}}>
                    <input type="submit" name="submit" value="submit" onClick={this.handleSubmit} />
                </div>

            </form>
        </div>
    )
}`

我想使用 Node/Express.js 将这张图片上传到服务器 我在 Node/Express 中的 API 代码。

所以请帮助我如何使用 API 上传此图像并使用 Node/Express 保存到服务器(在文件夹内)。

我的 Node 服务器代码是这样的

router.post(END_POINT,function (req, res) {
  //I want to add upload code here without any third party module and without req.files/req.file.
})

请帮帮我。先感谢您。

Answer 1

您可以使用 Multer 发送多张图片。

uploadImage() {
 const options = new RequestOptions({ headers: headers });
 const inputEl: HTMLInputElement = this.el.nativeElement.querySelector('#imageField');
 const fileCount: number = inputEl.files.length;
 const formData = new FormData();
 if (fileCount > 0) {
  formData.append('imageField', inputEl.files.item(0));
  }
}

这里的 imageField 是输入标签的名称，如下所示:

<input type="file" name="imageField (change)="uploadImage()">

然后是后端代码:

exports.uploadImage = (req, res) => {
var path;
var storage = multer.diskStorage({
    destination: function (req, res, next) {
        next(null, 'src/assets/images');
    },
    filename: function (req, file, next) {
        path = 'src/assets/images' + '.jpg';
        next(null, req.file.originalname + '.jpg');
    }
});
var upload = multer({ storage: storage }).any('imageField'); 
upload(req, res, error=> {
    console.log(req.files[0].path);
    if(error) {
        return res.json(error);
    }
    res.json({
        message: 'Uploaded !!',
        path: path
    })
 }) 
}