Question

您好我在一个表单中有几个HTML控件和一个文件上传控件。我正在用一些文本填充所有HTML控件以及一个用于文件upload的文件。现在我需要将所有这些数据和文件发布到我的api.Can任何一个帮我如何在角度4中执行此操作

Answer 1

您可以在Angular端使用ng2-file-upload。在角度组件中，添加

 this.uploadUrl = environment.baseApiUrl + '/api/file/Upload';
   this.uploader = new FileUploader({ url: this.uploadUrl });

   this.uploader.onBeforeUploadItem = (item) =>{

                var formData = [{‘your data’:’your data value’}];
                item.formData.push({ fileData: formData});

            };

然后在web api中添加如下控制器：

[RoutePrefix("api/file")]
    public class FileUploadController : ApiController    {
        [HttpPost]
        [Route("upload")]
        public async Task<HttpResponseMessage> FileUpload()
        {

            if (!Request.Content.IsMimeMultipartContent())
            {
                return Request.CreateErrorResponse(HttpStatusCode.UnsupportedMediaType, "Media content error");
            }

            var provider = new MultipartMemoryStreamProvider();
            await Request.Content.ReadAsMultipartAsync(provider);

            if(provider!=null && provider.Contents.Count>1)
            {
                //Your form data;
                var fileDataBuffer = await provider.Contents[0].ReadAsByteArrayAsync();
                 String fileDataJson = System.Text.Encoding.Default.GetString(fileDataBuffer);

               //Your uploaded file
               var file = provider.Contents[1]; 
               var fileBuffer = await file.ReadAsByteArrayAsync();


            }
            else
            {

                return Request.CreateErrorResponse(HttpStatusCode.UnsupportedMediaType, "Invalid file");
            }


        }




    }

Answer 2

我的解决方法如下：

在html文件中获取文件的输入

    <p >
      <label for="idFile" class="label-file">Choisir un Fichier</label>
      <input id="idFile" class="input-file" type="file" (change)="fileChange($event)" placeholder="Upload file">
    </p>

在你的ts中写入方法文件更改以获取数据

  fileChange(event) {
    let fileList: FileList = event.target.files;
    if (fileList.length > 0) {
      this.file = fileList[0];
     }
  }

然后你应该发布一个包含你的文件和你的数据的formData

  private docToFormData(doc) {
    let formData: FormData = new FormData();
    formData.append('file', doc.file, doc.file.name);
    formData.append('metadata', new Blob([JSON.stringify(doc)], {type: "application/json"}));
    return formData;
  }

  submitDocument(doc): Observable<any> {

    let formData = this.docToFormData(doc);
    return this._http.post(this._http.backendURL.submitDocument, formData)
      .map((res: Response) => {
        // TODO : return res.json and update back to return doc dto
        return res;
      });
  }

在我的情况下，doc是一个带元数据的对象

我希望这可以提供帮助。

在表单帖子中上传Angular 4文件

2 个答案: