文件上传或图像上传角度

时间:2018-08-28 12:46:10

标签: angular forms typescript file-upload multipartform-data

请帮助我或建议我

--------------- ################### ------------ ---

如果可能的话,有什么可能使用formcontrolName上载表单的图像的方法?

------------ ########################### ----- ----------------

我正在尝试上传包含其他信息的图像文件,例如firstnamelastnamefile,这很正常:

/* File Upload request  to Upload file  */
this.currentFileUpload = this.selectedFiles.item(0);
let formdata: FormData = new FormData();
formdata.append('firstName', "Harkesh");
formdata.append('lastName', "kumar");
formdata.append('file', this.currentFileUpload);

但是我的问题是我正在发送带有一些字符串和FORM的{​​{1}}文件,但是Object不接受FormData

Object

我正在尝试的第二个选项:

let formdata: FormData = new FormData();
formdata.append('functionId', this.functionId);
formdata.append('processId', this.processId);
formdata.append('file', this.currentFileUpload);
formdata.append('formDetails', userobjArr);

let formdata: FormData = new FormData(); formdata.append('file', this.currentFileUpload); userDetails.name = ""; userobjWrapper["functionId"] = this.functionId; userobjWrapper["processId"] = this.processId; userobjWrapper["taskId"] = this.taskId; userobjWrapper["file"] = this.currentFileUpload; userobjWrapper["formDetails"] = userobjArr; 是我分配给userobjArr的{​​{1}}数组,它得到Object的值。

我不确定如何在一次其余的Service API调用中读取图像?

1 个答案:

答案 0 :(得分:0)

尝试这个:)

onBmpFileUploadChange(event) {
    const self = this;
    const target = event.target || event.srcElement;
    const files = target.files;
    let arrPath = files[0].name;
    arrPath = arrPath.split('.');
    if ((arrPath[1] === 'bmp') || (arrPath[1] === 'BMP')) {
      const xhttp = new XMLHttpRequest();
      const formData = new FormData();
      console.log('uploadBitmap');
      formData.append('bitmapFile', files[0]);
      xhttp.onreadystatechange = function () {
        event.target.value = null;
        if (this.readyState === 4) {
          if (this.status === 201) {
            console.log('bmpUploadedSuccessfully');
          } else {
            console.log('bmpUploadFailed')));
          }
        }
      };
      xhttp.open('post', '/formatgraphics', true);
      xhttp.setRequestHeader('Pragma', 'no-cache');
      xhttp.send(formData);
    } else {
      console.log('uploadFailedInvalidFile')));
    }
  }
}