更新记录
0.0.1(2023-03-20)
-
平台兼容性
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
renderjs-choose-file 通过renderjs上传文件流/分片上传
组件缘由
- APP项目中需要上传大视频,直接上传临时文件容易造成接口超时,等待时间过长等问题,所以需要分片上传
- APP中选择视频文件是临时地址,无法进行分片上传,但是H5可以,所以借助renderjs的文件选择能力
- 通过renderjs选择到文件后,可以拿到文件流,然后通过renderjs的fetch方法上传文件流/分片上传
使用说明
props 传值:
accept: 'video/*' // 上传文件类型
capture: '' // 上传文件方式
multiple: false // 是否支持多选
action: '' // 上传地址
method: 'GET' // 上传方式
options: {} // 上传参数
事件:
success: (res) => {} // 上传成功
fail: (err) => {} // 上传失败
例子:
<renderjs-choose-file
ref="renderChooseFile"
@success="success"
@fail="fail"
调用方法:
this.$refs.renderChooseFile.click()
重点说明:
- 利用renderjs在浏览器中模拟点击事件,触发input[type=file]的点击事件
- 通过input[type=file]的change事件获取文件流
- 将文件流传递给上传的API(可以用三方sdk如demo中用的vod,也可自定上传api)
- 通过sdk进行分片上传文件流(
this.sdkUpload
)/或通过renderjs的fetch方法自定义上传文件流(this.uploadAction
)
暂时无法做到的功能
- 无法将文件流数据传递到vue到
service
中,所以文件上传只能在renderjs
中完成
- 无法像原生app一样,在选择文件时直接打开相机或者相册,只能
capture
属性空来选择系统默认的方式
- iOS选择文件后,因safari的特性,video会被压缩,可使用多选
multiple
属性来解决,但是文件大小会变大
功能
- 通过renderjs拿到文件流
- 通过renderjs分片上传文件流
- 通过renderjs自定义上传文件流