vuejs学习之路 vue上传文件控件往golang服务器上传文件升级版--需使用header、上传文件md5等参数（八)

vue代码：

1、后端需要验证请求的headers，所以需要增加:headers="headers"

2、后端需要检验前端传过来的md5，如果md5不一样，就就会拒绝接收，所以定义：newcreater: { creater: '', md5key: '' }

<el-upload class="upload-demo" drag :before-upload="beforeAvatarUpload"
           name="filename" :limit="1" :data="newcreater" :headers="headers"
           :show-file-list="true" :on-success="afterUp"  action="your_address">
  <i class="el-icon-upload" style="margin-right: 30px "></i>
  <div class="el-upload__tip">只能上传csv文件，且不超过500MB</div>
  <div class="el-upload__text">将CSV文件拖到此处，或<em>选取文件</em></div>
</el-upload>
3、下边这行可以通过添加一个图片对上传文件的格式等做一个更细的说明，看个人需求吧。
<el-col :span="7">
  <img style="width: 250px; height: 180px; margin-left: 50px" src="@/components/assembly/csvhelp.png">
</el-col>

3、beforeAvatarUpload函数对文件做一个过滤，并且计算文件的md5.

import SparkMD5 from 'spark-md5'   

beforeAvatarUpload(file) {
  const self = this
  const isJPG = file.type === 'text/csv'
  const isLt2M = file.size / 1024 / 1024 < 500
  if (!isJPG) {
    this.$message.error('只支持csv各式!')
  } else if (!isLt2M) {
    this.$message.error('上传文件大小不能超过 500MB!')
  } else {
    return new Promise((resolve, reject) => {
      // 计算md5并传给upload组件
      self.fileMd5(file, (md5) => {
        self.$set(self.newcreater, 'md5key', md5)
        self.$set(self.newcreater, 'creater', this.name)
        // 继续执行上传
        resolve()
      })
    })
  }
},

fileMd5(file, callback) {
  var vm = this
  vm.newcreater['md5key'] = ''
  var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
    file = file,
    chunkSize = 2097152, // Read in chunks of 2MB
    chunks = Math.ceil(file.size / chunkSize),
    currentChunk = 0,
    spark = new SparkMD5.ArrayBuffer(),
    fileReader = new FileReader()
  fileReader.onload = function(e) {
    spark.append(e.target.result) // Append array buffer
    currentChunk++
    if (currentChunk < chunks) {
      loadNext()
    } else {
      let blockMd5 = ''
      blockMd5 = spark.end()
      callback(blockMd5)
      vm.newcreater.md5key = blockMd5
      vm.newcreater.creater = vm.name
      vm.md5key = true
    }
  }
  fileReader.onerror = function() {
    vm.$message.warning(`读取CSV文件错误`)
  }

  function loadNext() {
    var start = currentChunk * chunkSize,
      end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize
    fileReader.readAsArrayBuffer(blobSlice.call(file, start, end))
  }

  loadNext()
},

afterUp(response, file, fileList) {
  //填在最后一位
  if (response.message == '上传成功') {
    this.form.csvfile.fileid = response.data.id
    this.form.csvfile.fileName = response.data.filename
    this.$message.success('文件上传到施压机成功。')
  } else {
    this.$message.error('文件上传到施压机失败，请重试。')
  }
},

golang端代码有时间再补充吧，要着急要看的话，给我留言，让我看见你们，哈哈。

另外，不要叫我大哥，受不起受不起。