req.filesを使わずに反応とノードで画像をアップロード

Question

私はファイルのアップロードのために反応/ノードに取り組んでいます。 ファイルリクエストをAPIリクエストに渡すのではなく、APIリクエストのボディ部分に渡しています。 私のコードは私がノード/エクスプレスでのノード/ Express.js マイAPIコードを使用してサーバにこの画像をアップロードしたい、などの

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> 
    ) 
}` 

で反応します。

この画像をAPIを使用してアップロードし、Node/Expressを使用してサーバー（フォルダ内）に保存する方法を教えてください。私のノードサーバのコードは次のようである

、

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

あなたが複数の画像をアップロードしている場合は、あなたがreq.files

• でreq.busboyを使用することができますが、複数の画像アップロード

をサポートしています from-data

から体内に郵便配達で画像をアップロードすることができます

• multipart/form-data

  var form = req.form（）;

  form.append（ 'ファイル'、 ''、{ 名： 'myfile.txtの'

  のcontentType： 'text/plainの

  }）。

Answer 2

複数の画像を送信することができます。

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タグの名前です：

<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 
    }) 
}) 
}