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({

extension:['.zip','.doc'],

success: function (res) {

console.log(JSON.stringify(res.tempFilePaths));

}});

// 选择图片文件

uni.chooseFile({

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: '', //你的上传附件接口地址

header: {'Authorization':'token'},

// body参数直接写key,value,如：

// key1: 'value1',

// key2: 'value2',

});

App 平台同时支持网络网页和本地网页，但本地网页及相关资源（js、css等文件）必须放在 uni-app 项目根目录->hybrid->html 文件夹下或者 static 目录下

本地资源存放路径：

其中主要是使用 plus.webview 导入本地html 来进行文件的选择（也可以使用在线资源）

在本地页面中利用JSBridge进行通信，

然后在里面监听是否选取了文件，然后调用上传方法createUpload()进行文件上传

posted on 2022-08-25 10:20 紫叶嵋阅读(544) 评论(0) 收藏举报