如何使用 javascript fetch api 和 express multer 上传图像

Posted

技术标签:

【中文标题】如何使用 javascript fetch api 和 express multer 上传图像【英文标题】:How to upload image using javascript fetch api and express multer 【发布时间】:2018-04-27 18:47:32 【问题描述】:

我在一个 reactjs 应用程序中工作,我必须上传用户图像。我在文件输入的 onChange 事件中获取文件并将其传递给父组件,父组件将使用数据发出发布请求

服务器端我使用 express 和 multer 进行文件上传,客户端使用 fetch api 上传图像。

提前致谢:)

【问题讨论】:

我使用这个模块通过 socket.io 上传文件:npmjs.com/package/socketio-file-upload @ricky 我已经尝试了 multer 示例,在该示例中我可以使用表单提交轻松上传文件,但我需要在没有表单提交的情况下使用它,例如使用函数在此处发出发布请求工作我不知道如何使用 FormData 等发送数据npmjs.com/package/multer 【参考方案1】:

我想通了 要将文件/图像上传到 multer,我们需要一个表单 enctype="multipart/form-data" 否则它将无法与 multer 一起使用

然后我从子组件获取文件 1)我创建了一个带有 encType="mutipart/form-data" 的空表单 2)当我收到文件时,我创建了一个新的 FormData(参考 myform) 3)然后在formData中附加键和值 4)创建 fetch.post() 并且它可以工作:)

用于参考提交代码

React 父组件 Upload.js

import React,  Component  from 'react'

import  ImageWithoutForm  from "../app/components/ImageUpload";


export default class UploadFile extends Component 
    onImageLoad(e)
        console.log('onImageLoad', e.target.files[0]);
        this.uploadForm(e.target.files[0]);
    

    uploadForm(file)
        let form = new FormData(this.refs.myForm);
        form.append('myImage', file);
        fetch('/upload-image', 
          method: 'POST',
          body: form
        ).then(res => console.log('res of fetch', res));
    

  render() 
    return (
      <div>
        <h4>Upload Image</h4>
        <ImageWithoutForm onImageLoad=(e)=>this.onImageLoad(e) />
        <form id="upload_form" ref="myForm"  encType="multipart/form-data">
        </form>
      </div>
    )
  

使用输入响应子组件以加载文件 ImageWithoutForm.js

import React,  Component  from 'react'

export  class ImageWithoutForm extends Component 

    handleSubmit(e)
        this.props.onImageLoad(e);
    


  render() 
    return (
      <div>
            <input type="file" onChange=(e)=>this.handleSubmit(e)/>
      </div>
    )
  

Express Route 文件取自某人 github 存储库和自定义 UploadImage.js

const express = require('express');
const multer = require('multer');
const path = require('path');

// Set Storage Engine
const storage = multer.diskStorage(
  destination: './public/uploads/',
  filename: function(req, file, cb)
    cb(null,file.fieldname + '-' + Date.now() + path.extname(file.originalname));
  
);

// Init Upload
const upload = multer(
  storage: storage,
  limits:fileSize: 1000000,
  fileFilter: function(req, file, cb)
    checkFileType(file, cb);
  
).single('myImage');

// Check File Type
function checkFileType(file, cb)
  // Allowed ext
  const filetypes = /jpeg|jpg|png|gif/;
  // Check ext
  const extname = filetypes.test(path.extname(file.originalname).toLowerCase());
  // Check mime
  const mimetype = filetypes.test(file.mimetype);

  if(mimetype && extname)
    return cb(null,true);
   else 
    cb('Error: Images Only!');
  


// Init app
const app = express.Router();


// Public Folder
app.use(express.static('./public'));


app.post('/', (req, res) => 
    console.log('handling upload image');
  upload(req, res, (err) => 
    if(err)
      console.log('first err', err);
      res.send(
        msg: err
      );
     else 
      if(req.file == undefined)
        console.log('Error: No File Selected!')
        res.send(
          msg: 'Error: No File Selected!'
        );
       else 
        console.log('File Uploaded!')
        res.send(
          msg: 'File Uploaded!',
          file: `uploads/$req.file.filename`
        );
      
    
  );
);

module.exports = app;

在我的 express app.js 中只需要路由文件 ImageUpload.js

并像这样映射到路线

var uploadImage = require('./routes/UploadImage');
server.use('/upload-image', uploadImage);

【讨论】:

以上是关于如何使用 javascript fetch api 和 express multer 上传图像的主要内容,如果未能解决你的问题,请参考以下文章

如何使用“Fetch API”在 javascript 和 c# 之间传递数据?

如何在 JavaScript 中将 Ajax 转换为 Fetch API?

Javascript Fetch API - 如何将输出作为对象保存到变量(不是承诺)

如何使用 javascript fetch api 和 express multer 上传图像

如何使用 fetch 将 FormData 从 javascript 发送到 ASP.NET Core 2.1 Web API

如何向 javascript 的 fetch() 函数发送附加数据