H5上传文件及FileReader的使用

1、功能：

        H5端调出手机文件管理界面，选择文件上传

2、适配机型：

        android、ios

3、上传文件接口接受入参：

        base64流

4、功能实现：

4.1点击上传按钮时创建file类型的input如下

const input = document.createElement('input') // 创建一个input

input.type = 'file' 

input.id = 'asFile' 

// input.hidden = 'hidden' // 将表单进行隐藏，hidden在手机端不起作用，pc端可以

input.style = 'display:none'// 将表单进行隐藏，换成css隐藏

input.multiple = 'multiple'//实现文件多选，单选可不写此属性

document.body.append(input) 

input.click() // 在内存中点击一下 弹出选中文件的窗口

4.2监听表单变化

input.addEventListener('change', function () { // 通过change 事件监听表单是否有变化

const files = this.files

//你自己的代码

})

4.3FileReader读取文件内容

const reader = new FileReader()

reader.onload = function () {

        const result = this.result  //读取结果

        //下面是你自己的代码

}

reader.readAsDataURL(element) // 读取文件的base64流