Проблема при загрузке файла с пользовательским контролем загрузки ng-prime и Angular - PullRequest
Новая
       32

Проблема при загрузке файла с пользовательским контролем загрузки ng-prime и Angular

0 голосов
/ 15 октября 2019

Я сталкиваюсь с этой странной проблемой при попытке загрузить файлы с помощью элемента управления ngPrime.

Угловой шаблон: 

<p-fileUpload name="file" uploadLabel="Comfirm" customUpload="true" [auto]="true" maxFileSize="1000000"
                  mode="advanced"    (uploadHandler)="myUploader($event)">

файл component.ts 

myUploader(event) {
    this.uploadService.uploadMyFile(event);
 }

uploadService.ts метод загрузки 

private formData: FormData = new FormData();
    uploadMyFile = function(event: any) {
        console.log('My File upload', event);
        if (event.files.length == 0) {
          console.log('No file selected.');
          return;
        }

        var fileToUpload = event.files[0];
        this.formData.append('file', fileToUpload);
        console.log(this.formData);
        this.http
          .post(`<APIPath>/api/uploadfile`, this.formData, {
            headers: this.headers
          })
          .subscribe(res => {
            console.log(res);
          });
      };

Запрос полезной нагрузки 

------WebKitFormBoundaryhiYaisgM5BgNpfkm
Content-Disposition: form-data; name="file"; filename="Cookie-song.docx"
Content-Type: application/vnd.openxmlformats-officedocument.wordprocessingml.document


------WebKitFormBoundaryhiYaisgM5BgNpfkm--

Ошибка в ответе 

SyntaxError: Unexpected token -<br> &nbsp; &nbsp;at parse

API-интерфейс NodeJS выглядит следующим образом 

export const uploadFilesHandler = async (req, res) => {
    var form = new formidable.IncomingForm();
    console.log(form);
    //upload code here
}

Я использую bodyParser при создании NodeAPI createAPP 

app.use(bodyParser.json({ limit: '100mb' }));

Ошибка консоли NodeAPI: 

SyntaxError: Unexpected token -
    at parse (/node_modules/body-parser/lib/types/json.js:83:15)
    at /node_modules/body-parser/lib/read.js:116:18

1 Ответ

0 голосов
/ 16 октября 2019

Эта ошибка возникла из-за того, что заголовок content-Type не был установлен в multipart / form. 

    @Injectable()
    export class UploadService {

        private headers= new HttpHeaders({ 'Content-Type': 'multipart/form-data' }); 
//^^-- Error was coming because of this was set to   
//private headers = new HttpHeaders({ 'Content-Type': 'application/json' });


            uploadMyFile = function(event: any) {
        const formData: FormData = new FormData();
                console.log('My File upload', event);
                if (event.files.length == 0) {
                  console.log('No file selected.');
                  return;
                }

                var fileToUpload = event.files[0];
                this.formData.append('file', fileToUpload);
                console.log(formData);
                this.http
                  .post(`<APIPath>/api/uploadfile`, formData, {
                    headers: this.headers
                  })
                  .subscribe(res => {
                    console.log(res);
                  });
              };
    }
...