OaApp之文件上传篇
文件上传功能
一、
Uniapp 官方提供了文件选择api ，uni.chooseFile(OBJECT)
官方提供的使用方法和说明：
从本地选择文件。
本API主要用于选择非媒体文件，如果选择的文件是媒体文件，另有3个专用API：
OBJECT 参数说明
|
参数名 |
类型 |
默认值 |
必填 |
说明 |
平台差异说明 |
|
count |
Number |
100 |
否 |
最多可以选择的文件数量 |
见下方说明 |
|
type |
String |
'all' |
否 |
所选的文件的类型 |
见下方说明 |
|
extension |
Array<String> |
|
否 |
根据文件拓展名过滤，每一项都不能是空字符串。默认不过滤。 |
见下方说明 |
|
sourceType |
Array<String> |
['album','camera'] |
否 |
（仅在type为image或video时可用）album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项 |
|
|
success |
Function |
|
是 |
成功则返回图片的本地文件路径列表 tempFilePaths |
|
|
fail |
Function |
|
否 |
接口调用失败的回调函数 |
|
|
complete |
Function |
|
否 |
接口调用结束的回调函数（调用成功、失败都会执行） |
|
Tips
- count 值在 H5 平台的表现，基于浏览器本身的规范。目前测试的结果来看，只能限制单选/多选，并不能限制数量。并且，在实际的手机浏览器很少有能够支持多选的。
- sourceType 在H5端对应input的capture属性，设置为['album']无效，依然可以使用相机。
- extension暂只支持文件后缀名，例如['.zip','.exe','.js']，不支持application/msword等类似值
注：文件的临时路径，在应用本次启动期间可以正常使用，如需持久保存，需在主动调用 uni.saveFile，在应用下次启动时才能访问得到。
success 返回参数说明
|
参数 |
类型 |
说明 |
|
tempFilePaths |
Array<String> |
文件的本地文件路径列表 |
|
tempFiles |
Array<Object>、Array<File> |
文件的本地文件列表，每一项是一个 File 对象 |
File 对象结构如下
|
参数 |
类型 |
说明 |
|
path |
String |
本地文件路径 |
|
size |
Number |
本地文件大小，单位：B |
|
name |
String |
包含扩展名的文件名称，仅H5支持 |
|
type |
String |
文件类型，仅H5支持 |
示例
uni.chooseFile({
count: 6, //默认100
extension:['.zip','.doc'],
success: function (res) {
console.log(JSON.stringify(res.tempFilePaths));
}});
// 选择图片文件
uni.chooseFile({
count: 10,
type: 'image',
success (res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFiles
}})
Ps：以上 是uni.chooseFile()的使用方法，但其仅适用H5端
二 、app端文件上传
- 首先介绍一下用到的两个api：uni,.saveFile(object) 存储文件到文件夹以及 uni.openDcument(object) 打开文档 的使用方法 和说明
uni.saveFile(OBJECT)
保存文件到本地。
平台差异说明
|
App |
H5 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节跳动小程序 |
QQ小程序 |
|
√ |
x |
√ |
√ |
√ |
√ |
√ |
注意：saveFile 会把临时文件移动，因此调用成功后传入的 tempFilePath 将不可用。
OBJECT 参数说明：
|
参数名 |
类型 |
必填 |
说明 |
|
tempFilePath |
String |
是 |
需要保存的文件的临时路径 |
|
success |
Function |
否 |
返回文件的保存路径，res = {savedFilePath: '文件的保存路径'} |
|
fail |
Function |
否 |
接口调用失败的回调函数 |
|
complete |
Function |
否 |
接口调用结束的回调函数（调用成功、失败都会执行） |
success 返回参数说明：
|
参数 |
说明 |
|
savedFilePath |
文件的保存路径 |
示例代码：
uni.chooseImage({
success: function (res) {
var tempFilePaths = res.tempFilePaths;
uni.saveFile({
tempFilePath: tempFilePaths[0],
success: function (res) {
var savedFilePath = res.savedFilePath;
}
});
}});
uni.openDocument(OBJECT)
新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx。
平台差异说明
|
App |
H5 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节跳动小程序 |
QQ小程序 |
|
√ |
x |
√ |
√ |
√ |
√ |
√ |
OBJECT 参数说明：
|
参数名 |
类型 |
必填 |
说明 |
平台差异说明 |
|
filePath |
String |
是 |
文件路径，可通过 downFile 获得 |
|
|
fileType |
String |
否 |
文件类型，指定文件类型打开文件，有效值 doc, xls, ppt, pdf, docx, xlsx, pptx |
微信小程序 |
|
success |
String |
否 |
接口调用成功的回调函数 |
|
|
fail |
String |
否 |
接口调用失败的回调函数 |
微信小程序 |
|
complete |
String |
否 |
接口调用结束的回调函数（调用成功、失败都会执行） |
|
示例代码：
uni.downloadFile({
url: 'https://example.com/somefile.pdf',
success: function (res) {
var filePath = res.tempFilePath;
uni.openDocument({
filePath: filePath,
success: function (res) {
console.log('打开文档成功');
}
});
}});
- 组件的调用：
<l-file
ref="lFile"
@up-success="upSuccess"
></l-file>
3.方法说明：
/* 预览临时文件 */
this.$refs.lFile.download({url})
.then(path=>{
this.$refs.lFile.open(path);
});
/**
* 保存到本地
* type 非save为临时下载
* customName 仅type=save生效 附件自定义名称需带后缀，自定义目录需以/结尾
* DownloadOptions 仅type=save生效 可选参数(http://www.html5plus.org/doc/zh_cn/downloader.html#plus.downloader.DownloadOptions)
* 默认下载到_downloads/files/ 可通过DownloadOptions自定义
*/this.$refs.lFile.download({
url, //必填，附件网络地址
type:'save', //选填，非save为临时下载
customName:'自定义文件名需要带后缀.jpg',
//...DownloadOptions直接写key:value
// 例如：
method: 'GET'
})
.then(path=>{
this.localPath = path;
});
/*
选择文件并上传
currentWebview=当前窗口，仅app端需要传，且必传
url=上传服务器地址，必填
name=上传文件的key(选填，默认为file)
header=请求头(选填)
*/this.$refs.lFile.upload({
// #ifdef APP-PLUS
currentWebview: this.$mp.page.$getAppWebview(),
// #endif
url: '', //你的上传附件接口地址
name: 'file',
header: {'Authorization':'token'},
// body参数直接写key,value,如：
// key1: 'value1',
// key2: 'value2',
});
App 平台同时支持网络网页和本地网页，但本地网页及相关资源（js、css等文件）必须放在 uni-app 项目根目录->hybrid->html 文件夹下或者 static 目录下
本地资源存放路径：
其中主要是使用 plus.webview 导入 本地html 来进行文件的选择（也可以使用在线资源）
在本地页面中 利用JSBridge进行通信，
然后在里面监听是否选取了文件， 然后调用上传方法createUpload()进行文件上传
