WhatIsHTML
@WhatIsHTML
HTML программист

Загрузка изображения Multipart: Boundary not found?

При отправке изображения получаю ошибку Error: Multipart: Boundary not found
На фронтенде отправка выглядит следующим образом
1. View
<input type="file" id="file" (change)="handleFileInput($event.target.files)">

2. Component
handleFileInput(files: FileList) {
        this.fileToUpload = files.item(0);
        this.userService.postFile(this.fileToUpload)
            .subscribe(
                response => {
                    console.log(response);
                },
                error => {
                    console.log('error', error);
                }
            );
    }

3. Service
postFile(fileToUpload: File): Observable<any> {
        const formData: FormData = new FormData();
        formData.append('fileKey', fileToUpload, fileToUpload.name);
        return this.apiService.post(this.apiConfig.photo, formData, true);
    }

Вот что я вижу во вкладке Network
General
Request URL: http://localhost:8000/api/photo
Request Method: POST
Status Code: 500 Internal Server Error
Remote Address: [::1]:8000
Referrer Policy: no-referrer-when-downgrade
<b>Response Headers</b>
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization
Access-Control-Allow-Methods: GET,PUT,POST,PATCH,DELETE
Access-Control-Allow-Origin: *
Connection: keep-alive
Content-Length: 1864
Content-Security-Policy: default-src 'self'
Content-Type: text/html; charset=utf-8
Date: Mon, 07 May 2018 12:56:18 GMT
X-Content-Type-Options: nosniff
X-Powered-By: Express


Request Headers
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Authorization: xxx
Cache-Control: no-cache
Connection: keep-alive
Content-Length: 2
Content-Type: multipart/form-data
Host: localhost:8000
Origin: http://localhost:4200
Pragma: no-cache
Referer: http://localhost:4200/user/test


Request payload
{}
No properties


На бекенде NodeJS использую multer
const multer = require("multer");

var eventStorage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, "./storage");
  },
  filename: function (req, file, cb) {
    var filename = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    for (var i = 0; i < 20; i++) {
      filename += possible.charAt(Math.floor(Math.random() * possible.length));
    }
    cb(null, filename + '.' + mime.extension(file.mimetype));
  }
});
var uploadEvent = multer({
  storage: eventStorage
});
router.post('/api/photo', auth.ensureAuthenticated, uploadEvent.any() , function (request, response) {
  console.log(request.files);
  handler.success(response, '', request.files);
});


Я не могу понять, где косяк - на фронтенде или бекенде?
Смущает пустой объект в Request payload, по идее там должен быть файл в виде хеша или типа того?
  • Вопрос задан
  • 2932 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы