如何在Angular 4中以formdata格式发送多个图像答案

【问题标题】：How to send multiple images in formdata format in Angular 4如何在Angular 4中以formdata格式发送多个图像
【发布时间】：2019-05-16 10:36:42
【问题描述】：

我想以 formdata 格式发送多张图片，到目前为止我发送的是 base65 格式的单张图片，但在这里我必须发送最多 5 张图片格式。

我正在尝试解决这个问题，但我无法实现。

我的代码如下 .ts

    handleFiles= function (fileInput: Event) {

         if (fileInput.target['files'].length>1) {

            var files = Array.from(fileInput.target['files']);
    this.authService.sendMultipalImages(files).subscribe(data=>{
        console.log(data);

    })

            }else{
                var files = Array.from(fileInput.target['files']);


                this.convertImageToBase64(files, []);
            }


                }


            convertImageToBase64(list, resultArray) {

              if(list.length){
                let reader = new FileReader();
                reader.readAsBinaryString(list[0]);
                reader.onload = (evt: any) => {

                  const str = btoa(evt.target.result)
                  resultArray.push('data:image/jpeg;base64,' + str);
                  list.splice(0, 1);
                  console.log(list.length)
                  return this.convertImageToBase64(list, resultArray);
                };  
              } else {


                console.log(resultArray.length);

                    this.attached_image = resultArray[0];

                }

这是我的服务 .ts 文件

sendMultipalImages = function(mImage){

      let formData: FormData = new FormData();

       formData.append('image', mImage);


        return this.http.post(this.api_url + 'uploadmultiple', formData, this.getUploadMulitpleImages()).map(res => res.json())
      }



header looks like this


getUploadMulitpleImages() {

            let headers = new Headers();
            headers.append('Content-Type', 'multipart/form-data');
           headers.append('Accept', 'application/json');
           headers.set('Authorization', 'Bearer ' + this.webToken);
          let option = new RequestOptions({ headers: headers });
       return option;
         }

请问如何将多张图片发送到服务器。您的帮助将不胜感激。在此先感谢

【问题讨论】：

人们会让你知道你的代码格式很糟糕 :) 我认为你的意思是 base64？？
使用当前方法时遇到什么错误？
抱歉，我不想以 base64 格式发送，因为它会增加大小，所以我想像 formdata (chunk) 一样发送
我可以发送单张图片，但对于多张图片，无论我写的代码是否正确，我都不确定。

标签： angular image multipartform-data

【解决方案1】：

我找到了 Ans。只是我从标题中删除了这些下面的东西，没有对组件文件进行任何更改，

 headers.append('Content-Type', 'multipart/form-data');
  headers.set('Authorization', 'Bearer ' + this.webToken);// this is optional

服务.ts

sendMultipalImages = function(mImage){
       debugger;
       var formData: FormData = new FormData();
       for (const file of mImage) {
        formData.append(file.name, file)

      }
    return this.http.post(this.api_url + 'uploadmultiple', formData, this.getUploadMulitpleImages()).map(res => res.json())
      }

【讨论】：