文件上传：避免重复上传

上一篇文章说了，使用 SparkMd5 来获取文件 md5 的 Hash 标识来判断是否已经上传过了，现在代码实现一下

 （一）安装

在项目中安装 spark-md5

cnpm  i spark-md5 -D

代码：

element-ui 需要屏蔽其自动上传的功能，需要自己手写上传方法，上传方法写在 on-change 钩子里

<template>
  <div>
    <el-upload
      class="avatar-uploader"
      action
      :on-change="uploadFile"
      :auto-upload="false"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
    >
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>

<script>
import SparkMD5 from 'spark-md5'
export default {
    data() {
      return {
        imageUrl: ''
      }
    },
    methods: {
      // 上传方法
      uploadFile(file) {
        // element-ui 将文件信息 { name, size, type, uid, webkitRelativePath }保存在 file.raw 字段里
        const isJPG = (/(png|jpeg|jpg|svg|gif|timg)/g).test(file.raw.type)
        if (!isJPG) {
          this.$message.error('上传头像图片格式错误!')
          return
        }
        var fileReader = new FileReader()
        var spark = new SparkMD5()
        var blobSlice = File.prototype.mozSlice || File.prototype.webkitSlice || File.prototype.slice
        const chunkSize = 1024 * 1024   // 文件分块 每一块2KB
        // Math.ceil 向上取整 如果有小数 整