尝试上传时文件未识别为一个文件

时间:2019-12-08 19:33:42

标签: javascript angular typescript file ionic-framework

我想上传以前在文件中传输的图像。在这种情况下,我只是从桌面上选择一个文件进行测试,因此它应该已经是一个文件。使用该应用程序时,我还需要存储文件,因为必须在另一页上检索该文件。在我的存储中,其存储方式如下:

File {name: "abc.jpeg",…}

我在提交表单时也会记录一个文件。但是现在来了奇怪的事情。我的Django Api不接受。这是api在文档中所说的,用于请求:

 string (Src) non-empty
Not Char but image upload field

对于资源:

string <uri> (Src)

我收到此错误:

  

src:[“提交的数据不是文件。请检查   表格。“]

我不知道为什么这样做。这是我的代码,在其中获取图像/文件,然后将其转换。但就我而言,它应该首先起作用,因为我选择了一份我的伴奏文件。

代码:

/

/ convert base64 image into a file
    function base64toBlob(base64Data, contentType) {
      contentType = contentType || '';
      const sliceSize = 1024;
      const byteCharacters = atob(base64Data);
      const bytesLength = byteCharacters.length;
      const slicesCount = Math.ceil(bytesLength / sliceSize);
      const byteArrays = new Array(slicesCount);

      for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
        const begin = sliceIndex * sliceSize;
        const end = Math.min(begin + sliceSize, bytesLength);

        const bytes = new Array(end - begin);
        for (let offset = begin, i = 0; offset < end; ++i, ++offset) {
          bytes[i] = byteCharacters[offset].charCodeAt(0);
        }
        byteArrays[sliceIndex] = new Uint8Array(bytes);
      }
      return new Blob(byteArrays, { type: contentType });
    }
...
  @ViewChild('filePicker') filePickerRef: ElementRef<HTMLInputElement>;
  @Output() imagePick = new EventEmitter<string | File>();
  selectedImage: string;
  usePicker = false;
...
onFileChosen(event: Event) {
    const pickedFile = (event.target as HTMLInputElement).files[0];
    const fr = new FileReader();
    fr.onload = () => {
      const dataUrl = fr.result.toString();
      this.selectedImage = dataUrl;
      this.imagePick.emit(pickedFile);
    };
    fr.readAsDataURL(pickedFile);
  }

  onImagePicked(imageData: string) {
    let imageFile;
    if (typeof imageData === 'string') {

      imageFile = base64toBlob(imageData.replace('data:image/jpeg;base64,', ''), 'image/jpeg');
      this.storage.set('image_data', imageFile);
      console.log('stored1');
    } else {
      imageFile = imageData
      this.storage.set('image_data', imageData);
      console.log('stored2');
    }
  }

0 个答案:

没有答案