基于vue的h5文件切片上传（获取文件md5，实现秒传、进度条实现）

template

<button @click="file"></button>
<label ref="upload"
       style="position: relative;">
  <input type="file"
         @change="selectFile"
         style="position: absolute; width: 1px; height: 1px; opacity: 0; z-index: -1;">
</label>

script

methods: {
    file() {
        // 模拟点击file input触发选择文件，注意：不能在任何方式的回调里面执行此语句
        this.$refs.upload.click()
    }
    selectFile(event) {
        // 调用上传方法，传入选择的文件对象
        this.uploadFile(event.target.files[0], () => {
            // upload-success
        })
        // 重置file input控件的值
        event.target.value = ''
    }
}

核心js文件

// uploadFile.js
import Vue from 'vue'
import SparkMD5 from 'spark-md5'

export default function() {
   

    // 将上传文件的方法挂载到vue的原型链上面
    Vue.