web-dev-qa-db-ja.com

Multerを使用してExpressにフェッチして画像をアップロードする

Expressサーバーに画像をアップロードしようとしています。これを行う方法については正確にはわかりませんが、MDN、express、react-dropzone、およびmulter ドキュメンテーション。 Multerはreact-dropzoneからFormDataオブジェクトを取得していないようですが、req.fileからログアウトすると、未定義が返されます。

server.js

var storage = multer.diskStorage({
        destination: './public/users',
        filename: function (req, file, cb) {
            switch (file.mimetype) {
                case 'image/jpeg':
                    ext = '.jpeg';
                    break;
                case 'image/png':
                    ext = '.png';
                    break;
            }
            cb(null, file.originalname + ext);
        }
    });

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

app.use(upload.single('photo'));

app.post('/uploadUserImage', function (req, res) {
    console.log(JSON.stringify(req.body.photo)) // form fields
    console.log(req.photo) // form files
    console.log(req.file) // form files
    res.send(req.body.photo);
});

client.js

    function uploadImage (image) {
      var formData = new FormData();
      formData.append('photo', image);
      fetch('http://localhost:8080/uploadUserImage/', {
        method:'POST',
         body: formData
      });
    }

このリクエストを行うと、morganは以下をログアウトします。

{写真： '[オブジェクトファイル]'} <--- console.log（req.body '）;から

未定義<--- console.log（req.file）;から

multerはフォルダpublic/uploadsを作成しますが、その場所に画像を配置しません。 sharp （ファイルサイズを圧縮して画像のサイズを変更するため）を実行してからuploadsフォルダーに配置する必要があるため、写真を取得するにはどうすればよいですか？

node.jsexpressreactjsuploadmulter
11
guyforlowbro

'Content-type'を明示的に指定したため、エラーが発生します。これを適切に行うには、境界も指定する必要があります。 multipart/form-dataの詳細な説明はここにあります： HTTPファイルのアップロードはどのように機能しますか？

ファイルのアップロードに関する問題を解決するには、fetchリクエストから'Content-Type'仕様を削除する必要があります。 uploadImageメソッドをリファクタリングして、入力を解析せずにフォームをアップロードすることもできます。

function uploadImage () {
  // This assumes the form's name is `myForm`
  var form = document.getElementById("myForm");
  var formData = new FormData(form);
  fetch('http://localhost:8000/uploadUserImage', {
    method: 'POST',
    body: formData
  });
}
10
gnerkus

私にとっての問題は、firebaseにエラーがあり、multerを使用できないことでした。 busboyを使用して、手動で解析する必要があります。また、ファイルblobの代わりにreact nativeimagePickerからURIを追加する必要がありました。このような：

data.append('fileData', {
  uri : pickerResponse.uri,
  type: pickerResponse.type,
  name: pickerResponse.fileName
});
0
NickJ