在移动项目开发中,使用的是Ionic框架,当中涉及到文件上传。
开发思路:
- 使用文件选择插件获取路径
- 使用路径上传文件
开发流程涉及到的组件有(Ionic官方文档)
- 文件选择 https://ionicframework.com/do...
- 文件打开 https://ionicframework.com/do... (在已上传的文件列表中可能你会使用上)
- 文件路径 https://ionicframework.com/do...
插件安装
下面只列举文件选择
的插件安装方法。文件打开
和文件路径
安装方式同理,文档有具体描述,文件选择
插件有版本的注意事项
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
文件选择 filechooser
文件选择
filechooser插件能调用手机中的文件管理,选择文件夹里面的文件,成功则返回文件的路径。
使用方法如下
Ionic3.x
import { FileChooser } from '@ionic-native/file-chooser';
constructor(private fileChooser: FileChooser) { }
...
this.fileChooser.open()
.then(uri => {
// uri 文件的路径
console.log(uri)
})
.catch(e => console.log(e));
Ionic4.x
import { FileChooser } from '@ionic-native/file-chooser/ngx';
constructor(private fileChooser: FileChooser) { }
...
this.fileChooser.open()
.then(uri => {
// uri 文件的路径
console.log(uri)
})
.catch(e => console.log(e));
这时候,你可以使用获得的uri
,结合http请求 或者 file-transfer
插件进行文件上传。
但是,你在选择图片文件进行上传时,发现会上传失败,具体调试时发现并没上进行文件上传,其实原因是没有找到文件。请继续往下看。
获取文件的实际路径
需要安装插件filePath
文件路径 获取图片文件的实际路径
this.fileChooser.open().then(uri => {
// uri 文件的路径
// 你会发现通过此插件,选择图片文件跟选择其他文件(.doc/.xlsx/.docx/.ppt ...),获得的uri是有区别的
// 图片文件路径:content://media/....
// 其他文件路径:file:///storage/....
// 因此将图片文件转换成实际路径,或者叫绝对路径
(<any>window).FilePath.resolveNativePath(uri, (result) => {
this.util.tip(result);
// 调用文件上传(此方法需要自行编写)
this.uploadAttachment(result);
});
})
.catch(e => console.log(e));
这时,就能正常上传附件了。
读取选择的图片
有时候你需要刚才选择好的图片,进行下一步的操作。
你可以参考下面的写法
upload(){
this.fileChooser.open().then((url) => {
(<any>window).FilePath.resolveNativePath(url, (result) => {
// 上传文件
this.uploadFileByPath(filePath);
// 读取图片
this.readimage(filePath);
})
})
}
uploadFileByPath(filePath){
// 实现上传的代码
}
readimage(filePath) {
(<any>window).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'});
// 对图片操作的 业务代码
}
})
})
}