【问题标题】:angular send files to server角度发送文件到服务器
【发布时间】:2019-11-16 21:57:01
【问题描述】:

我正在尝试将两种类型的文件发送到服务器 imageszip 我已经安装了

"@ionic-native/file": "^5.16.0",
"@ionic-native/file-transfer": "^5.16.0",
"cordova-plugin-file": "^6.0.2",
"cordova-plugin-file-transfer": "^1.7.1",

我还将文件类导入到我的组件中,例如:

从 '@ionic-native/file-transfer/ngx' 导入 { FileTransfer, FileUploadOptions, FileTransferObject }; 从'@ionic-native/file'导入{文件};

构造函数( // ETC。 私人传输:FileTransfer, 私人档案:档案 ) { }

我收到了这个警告:

代码

这是我的表单

<form class="ion-padding" [formGroup]="distributorForm" (ngSubmit)="approveDistributor()">
    <ion-row class="ion-padding">
        <ion-col size="12">
            <ion-input type="file" formControlName="coDoc" placeholder="Company documents"></ion-input>
            <small>1- Only <kbd>Zip</kbd> files are allowed. <br> 2- Maximum size: <kbd>10 MB</kbd></small>
        </ion-col>

        <ion-col size="12">
            <ion-button class="ion-margin-top" type="submit" expand="full" color="success" [disabled]="!distributorForm.valid">SEND</ion-button>
        </ion-col>
    </ion-row>
</form>

这是我当前的组件函数without files(这会将数据发送到服务。

approveDistributor() {
    const distributorForm = this.distributorForm.value;
    // tslint:disable-next-line: max-line-length
    this.verifyService.distributorForm(distributorForm.coDoc).subscribe(
      data => {
        this.alertService.presentToast('Sent successfully.');
      },
      error => {
        this.alertService.presentToast(error['message']);
      },
      () => {

        this.Mainstorage.ready().then(() => {

          this.Mainstorage.get('token').then(
            data => {
              this.alertService.presentToast('Your data is in process after approve you\'ll be able to work with software.');
            },
            error => {
              console.log(error);
            }
          );

        });

      }
    );
  }

这是我的服务功能(这会将数据发送到服务器)

distributorForm(
    coDoc: String
    ) {
    const headers = new HttpHeaders({
      Authorization : this.token.token_type + " " + this.token.access_token,
      Accept: 'application/json, text/plain',
      'Content-Type': 'application/json'
    });
    return this.http.post(this.env.companyDocs,
      {
        coDoc
      }, { headers }
    );
  }

问题

  1. 我应该担心收到的 FileTransfer 警告吗?如果是怎么解决?
  2. 如何获取我的文件正确的路径以便将它们发送到服务器?

更新

我已将函数更改为使用formData,例如:

    const distributorForm = this.distributorForm.value; //my original line

    //added lines
    const formData: FormData = new FormData();
    formData.append('coDoc', distributorForm);
    console.log(formData); // this returns empty array under formData in console.

    // tslint:disable-next-line: max-line-length
    this.verifyService.distributorForm(formData).subscribe(
...
);

即使使用formData,我也无法将文件发送到服务器。

【问题讨论】:

  • 你正在使用 这将帮助你:stackoverflow.com/questions/58429122/…
  • @ShaileshBhokare 谢谢,但我上传的文件是 zip 它不是图片所以不确定base64img 是否会有所帮助
  • # Solved 我解决了我的问题并提供了解决方案here

标签: angular typescript ionic-framework


【解决方案1】:
 saveComp() {


            var value: File = file;//get file from input 

            this.customService.saveFile(value)
                .subscribe((data: any) => {
                    // do some stuff

                }, (error: any) => console.log(error))


            return;
           }




saveFile(file: File): any {
        const formData: FormData = new FormData();
       var url="your url";
       //example url= "http://localhost:9090/"+ 'api/CrmLead/CreateFollowUpByExcel';
        formData.append('FollowUpFile', file, file.name);
        return this._http.post(url, formData, this.requestOptions)
            .catch(this.errorHandler);
    }
  requestOptions = {
        headers: new HttpHeaders({

            'Authorization': 'Bearer ' + token,

        })
    };

在 ApiController C# 中

                var httpRequest = _httpContextAccessor.HttpContext.Request;
                var postedFile = httpRequest.Form.Files["FollowUpFile"];

                string path = null;
                if (postedFile != null)
                {
                // do some stuff with file                     

                }

【讨论】:

  • 嗨,您的回答没有任何解释,除了使用 formData 之外我什么也得不到,我根据它更新了我的问题。请查看更新,如果您有更多想法,请与解释分享。谢谢
  • @mafortis 您可以使用 formdata 将文件发送到服务器,如上所示,您可以按照以下 api 控制器将文件发送到控制器。客户端和服务器中的文件名应该相同。上面示例中的示例“FollowUpFile”。试试吧,你会得到解决的。
  • 仍然无法正常工作,请参阅此处stackoverflow.com/questions/58896951/…
猜你喜欢
  • 2018-06-11
  • 1970-01-01
  • 1970-01-01
  • 2023-01-26
  • 1970-01-01
  • 2021-12-05
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多