代码之家 › 专栏 › 技术社区 › harkesh kumar

角度文件上传或图像上传

multipartform-data file-upload typescript forms angular

1

harkesh kumar · 技术社区 · 8 年前

请帮助我或建议我

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

如果可能,请给出一些建议

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

我正在尝试上载一个包含其他信息的图像文件,如 firstname , lastname 和 file 这是完美的:

/* 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 用一些字符串和 Object ,但是 FormData 不接受 对象 :

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 是 对象 我分配的数组 formDetails 这是越来越 null 价值。

我不确定如何在一个rest服务API调用中读取映像?对于rest API,我使用的是spring boot rest控制器

你能给我提个建议吗。。

1 回复 | 直到 7 年前

1

0

Jaga 8 年前

试试这个:)

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')));
    }
  }
}