使用自定义 ng-prime 上传控件和 Angular 上传文件时出现问题

Question

我在尝试使用 ngPrime 控件上传文件时遇到了这个奇怪的问题。

Angular 模板：

<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

NodeJS API 看起来像这样

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

我在创建Node时使用了bodyParserAPI createAPP

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

节点API控制台错误：

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

Answer 1

出现此错误是因为 header 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);
                  });
              };
    }

使用自定义 ng-prime 上传控件和 Angular 上传文件时出现问题

Issue in uploading file with custom ng-prime upload control and Angular

file-upload

node.js

express

primeng

angular