更新记录

0.0.1（2023-03-20）

-

平台兼容性

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自定义上传文件流