我一直在尝试实现捕获图像并通过ionic中的FormData上载。我尝试了很多事情,但无法上传文件。以下是REST客户端的请求标头文件上传的屏幕截图。enter image description here
下面是捕获和上传逻辑的离子代码段
takePicture(event) {
this.camera.getPicture(this.options).then((imageData) => {
if (this.imageType === 'front') {
this.imageDataFrontUrl = (window as any).Ionic.WebView.convertFileSrc(imageData);
} else if (this.imageType === 'back') {
this.imageDataBackUrl = (window as any).Ionic.WebView.convertFileSrc(imageData);
}
debugger;
console.log(`imageData -> ${imageData}`);
this.file.resolveLocalFilesystemUrl(imageData).then((entry: FileEntry) => {
entry.file(file => {
if (file.size >= 100000) {
this.utils.showAlert('Error', 'File size exceeds 100kb');
} else {
this.readFile(file);
}
});
});
}, (err) => {
this.utils.showAlert('Error', 'Something went wrong');
});
}
readFile(file: any) {
const reader = new FileReader();
reader.onloadend = () => {
const imgBlob = new Blob([reader.result], {
type: file.type
});
const formData = new FormData();
formData.append('file', imgBlob, file.name);
this.uploadFile(formData);
};
reader.readAsArrayBuffer(file);
}
uploadFile(file: FormData) {
this.authService.fileUpload(file).subscribe(data => {
console.log(data)
});
以上操作失败。
这是请求标头的样子:
------WebKitFormBoundarypAj335xQVljPadLR
Content-Disposition: form-data; name="file"; filename="Image.jpeg"
Content-Type: image/jpeg
------WebKitFormBoundarypAj335xQVljPadLR--
我还包括了**Content-type:multipart/form-data** in Request headers
Request fails with the response
**Status Code:400 ModSecurity Action**
我的问题是为什么我无法在请求中发送文件数据,我在做什么错。谢谢。