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