如何从angular服务在NodeJS中发送base 64字符串的大容量pdf文件?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (124)

在上传时pdf file,我正在base64客户端生成。

然后提交表单并将其发送base64到nodejs服务器。

但是当我在nodejs中安慰字符串时,它只是我在前端获得的后半部分。

这是我的component.ts

    this.uploadForm = this.formBuilder.group({
          branch         : ['cs', Validators.required],
          course         : ['B-Tech', Validators.required],          
          document       : [null, Validators.required],
          semester       : ['3', Validators.required]         
     });

 onFileChange(event) {
            const reader = new FileReader();

            if (event.target.files && event.target.files.length) {
              const [file] = event.target.files;
              reader.readAsDataURL(file);
              this.filename = file.name;
              reader.onload = () => {
                console.log(reader.result);
                this.uploadForm.patchValue({
                  document: reader.result
                });
              };
            }
          }  


OnUpload (uploadForm: any ) {
    const obs$ = this.userService.uploadData(uploadForm);
    obs$.subscribe(data => {
      console.log(data);
    });
  }

我的service.ts is

 uploadData (uploadForm) {
    return this.http.post<RegisterResponse>('/user/upload', uploadForm);
  }

而且我没有得到一些其他fieldsform

app.js

app.post('/user/upload',  (req,res) => {
  const body = req.body;
  console.log(body);
} 

console.log(body)给出

OEgyOQk5iW0aEmeveZ4nqq4sWLaKMf4OPLILVgxXV0idCG11OT0/3H8A++UgjJ8tJ0MgnH8JEhQoVzj33XPfriiLlifVday..........,
semester: '3',

理想效果如下

{
 document: 'data:application/pdf;base64,wasevesvgrtbrtberkgwewe.....',
 semester: 'A',
 branch: 'B',
 year: 'C'
}

但它适用于像(200kB)这样的小尺寸文件

提问于
用户回答回答于

我认为如果你不在前端将pdf文件转换为base64会更好,因为它会增加请求开销,因为base64的大小更大。最好使用html5 FormData上传文件和其他请求有效负载。尝试这些更改。

直接将文件值分配给你的文档属性。

 this.uploadForm.patchValue({
    document: event.target.files[0]
 });
  //inside your service enrich your data with FormData ,set content-type to undefined and send it
 uploadData (uploadForm) {
    //enrich your data is FormData
    let fd= new FormData();
    // try looping through `this.form.controls` or uploadForm, to assign it property key and value dynamically
    fd.append('branch', branch_value);
    fd.append('semester', semester_value);
    fd.document('document',document_value)
    return this.http.post<RegisterResponse>('/user/upload', fd,set_header_config);
 }

确保将内容类型正确设置为未定义。我已经测试上传文件在angularjs,但不太熟悉最新的angular变化。

可以查看以下博客:http://learnwebtechs.com/2017/04/22/angularjs-multiple-file-upload-using-http-service

扫码关注云+社区

领取腾讯云代金券