组件缘由

• APP项目中需要上传大视频，直接上传临时文件容易造成接口超时，等待时间过长等问题，所以需要分片上传
• APP中选择视频文件是临时地址，无法进行分片上传，但是H5可以，所以借助renderjs的文件选择能力
• 通过renderjs选择到文件后，可以拿到文件流，然后通过renderjs的fetch方法上传文件流/分片上传

代码思路

创建原生的input[type=file]的dom

<view
    v-html="chooseFileHtml"
/>

data() {
    return {
        chooseFileHtml: `<input type="file" id="custom-choose-file">`
    }
}

监听input[type=file]change事件

const fileEl = document.getElementById('custom-choose-file')

// 事件监听
fileEl.addEventListener('change', (e) => {
    // 上传视频文件
    this.upload(fileEl)
})

将获取到的文件流在renderjs中进行上传

methods: {
    upload(fileEl) {
    let [file] = fileEl.files
    const formData = new FormData()
    formData.append('file', file)

    fetch('https://example.com/custom-upload-api', {
        method: 'POST',
        body: formData,
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    })
}

源码下载

点击前往 dcloud插件市场