Select file uploads in the gallery for another article

For mobile project development, the Ionic framework is used, which involves file uploading.

Development ideas:

  1. Select the plug-in access path using the file
  2. Upload the file using the path

The components involved in the development process are (Ionic official document)

  • File selection https://ionicframework.com/do…
  • File open https://ionicframework.com/do… (You may use it in the list of uploaded files)
  • The file path https://ionicframework.com/do…

Plug-in installation

The following lists only the plug-in installation methods selected by the file. File open and file path installation way is the same, the document has the specific description, the file selection plug-in has the version of the matters needing attention

Ionic3.x

$ ionic cordova plugin add cordova-plugin-filechooser
$ npm install --save @ionic-native/file-chooser@4

Ionic4.x

$ ionic cordova plugin add cordova-plugin-filechooser
$ npm install @ionic-native/file-chooser

Select FilEchooser for the file

The FileChooser plugin invokes file management on the phone, selects files in a folder, and returns the path to the file on success. Use it as follows

Ionic3.x

import { FileChooser } from '@ionic-native/file-chooser'; constructor(private fileChooser: FileChooser) { } ... This.fileChooser.open (). Then (URI => {console.log(URI)}).

Ionic4.x

import { FileChooser } from '@ionic-native/file-chooser/ngx'; constructor(private fileChooser: FileChooser) { } ... This.fileChooser.open (). Then (URI => {console.log(URI)}).

At this point, you can upload the file using the obtained URI in conjunction with the HTTP request or the File-Transfer plugin. However, when you select the picture file to upload, you find that the upload fails. When debugging, you find that the file is not uploaded. In fact, the reason is that the file is not found. Please keep reading.

Gets the actual path to the file

You need to install the plugin FilePath to get the actual path of the image file

This.fileChooser.open (). Then (URI => {// Path to the URI file // You will find that by using this plugin, select an image file and select another file (.doc/.xlsx/.docx/.ppt...). // Image file path: content://media/.... // Other file paths: file:///storage/.... / / so to convert image files to the actual path, or cake to path (< any > Windows). The FilePath. ResolveNativePath (uri, (result) = > {this. Util. Tip (result); This.uploadAttachment (result); this.uploadAttachment(result); }); }) .catch(e => console.log(e));

At this time, you can normally upload the attachment.

Read the selected image

Sometimes you need to select an image and move on to the next step. You can refer to the following way of writing

upload(){ this.fileChooser.open().then((url) => { (<any>window).FilePath.resolveNativePath(url, (result) = bb0 {this.uploadFileByPath(filePath); // Load image this.readiimage (filePath); })})} uploadFileByPath (filePath} {/ / upload code readimage (filePath) {(< any > Windows). ResolveLocalFileSystemURL (filePath,  (res) => { res.file((resFile) => { var reader = new FileReader(); reader.readAsArrayBuffer(resFile); reader.onloadend = (evt: any) => { var imgBlob = new Blob([evt.target.result], { type: 'image/jpeg'}); }})})}