我想使用 FormData 将图像上传到我的后端,但由于 Ionic DEVAPP 和 Ionic VIEW 不支持文件、文件传输和文件上传插件,我需要仅使用 Angular Http 或 HttpClient 来完成.
当使用 DestinationType.FILE_URI 时,我可以从文件中获取内部 url 并将其显示在 img 对象上,但如果没有 native 文件、文件路径和文件传输插件,我无法从该 url 创建 typescript 文件对象。
getImage() {
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY
}
this.camera.getPicture(options).then((imageData) => {
this.imageURI = this.sanitizer.bypassSecurityTrustUrl(imageData)
}, (err) => {
console.log(err)
this.presentToast(err)
})
使用这个模板
<ion-content padding>
<ion-item>
<p>{{imageFileName}}</p>
<button ion-button color="secondary" (click)="getImage()">Get Image</button>
</ion-item>
<ion-item>
<h4>Image Preview</h4>
<img style="display:block" [src]="imageURI" *ngIf="imageURI" alt="Ionic File" width="300" />
</ion-item>
<ion-item>
<button ion-button (click)="uploadFile()">Upload</button>
</ion-item>
</ion-content>
当使用 DestinationType.DATA_URL 时,我可以显示图像,但无法创建原始文件名所需的 typescript 文件对象,以将图像附加到我的 Ionic 应用程序的上传服务中使用的 FormData。
看来我可以找到一种方法来使用来自 FILE_URI 的原始文件名和来自 DATA_URL 的 base64 编码数据使用 cordova 相机 native 插件中的 camera.getPicture 创建此 typescript 文件对象。
将文件上传到我的后端的服务只是使用这种方法:
postImage(image: File): Observable<any> {
const formData = new FormData()
.append('file', image, image.name)
}
return this.httpClient.post<any>(this.myUrl,formData)
}
组件 myPage.ts 的 getImage 和 uploadservice.ts 的 postImage 都工作正常,但我找不到从 camera.getPicture imageData 创建文件对象的方法
最佳答案
如果你不想使用原生插件,你总是可以使用 angular。对于这种情况,使用 ionic 输入文件:
<ion-input type="file"></ion-input>
然后用 angular 做剩下的事情: https://www.academind.com/learn/angular/snippets/angular-image-upload-made-easy/
你可以使用这个例子:
https://github.com/diegogplfree/Ionic3-fileupload-non-native
亲切的问候。
关于angular - ionic 3 从相机上传图像不使用文件、文件传输、文件上传插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49171813/