el-upload上传文件使用方式

<template>
 <div class="model_box">
  <div class="upload_bin">
   <el-dialog
    width="400px"
    title="上传文件"
    :lock-scroll="true"
    :show-close="true"
    @close="cancel_upload"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :visible.sync="upload_dialogVisible"
   >
    <el-upload
     ref="upload"
     drag
     action="#"
     accept="zip"
     :limit="1"
     :headers="headers"
     :on-remove="remove_bin"
     :on-exceed="handleExceed"
     :on-change="handle_model_change"
     :auto-upload="false"
    >
     <i class="el-icon-upload"></i>
     <div class="el-upload__text"><em>点击选择文件上传</em></div>
     <div class="el-upload__tip" slot="tip">只可上传一个zip文件</div>
    </el-upload>
    <span slot="footer" class="dialog-footer">
     <el-button size="small" @click="cancel_upload">取 消</el-button>
     <el-button size="small" type="primary" @click="confirm_upload(0)">上 传1</el-button>
     <el-button size="small" type="primary" @click="confirm_upload(1)">上 传2</el-button>
    </span>
   </el-dialog>
  </div>
 </div>
</template>

<script>
import { upload_version } from '../utils/api'
export default {
 name: 'Test',
 data() {
  return {
   upload_dialogVisible: false,
   headers: {
    'Content-Type': 'application/octet-stream',
   },
   body: '',
   body1: '',
   type_list: ['zip'],
   file_type: '',
  }
 },
 methods: {
  // 取消上传
  cancel_upload() {
   this.upload_dialogVisible = false
   this.body = ''
   this.body1 = ''
   this.$refs.upload.clearFiles()
  },
  // 确认上传
  confirm_upload(type) {
   if (!this.body) return this.$message.warning('请先选择文件...')
   //  console.log(this.body)
   //  return
   if (type == 1) {
    console.log('body1', this.body1)
    upload_version(this.body1, this.headers)
     .then(() => {
      this.cancel_upload()
      return this.$message.success('上传成功...')
     })
     .catch(e => {
      console.log(e)
     })
   } else {
    console.log('body', this.body)
    upload_version(this.body, this.headers)
     .then(() => {
      this.cancel_upload()
      return this.$message.success('上传成功...')
     })
     .catch(e => {
      console.log(e)
     })
   }
  },
  // 超出上传文件数目的提示
  handleExceed() {
   return this.$message.warning('只能上传一个文件...')
  },
  // 移除文件
  remove_bin() {
   this.body = ''
   this.body1 = ''
   this.$refs.upload.clearFiles()
  },
  // 文件改变时变化
  handle_model_change(file, fileList) {
   this.file_type = ''
   this.type_list.forEach(item => {
    if (file.name.includes(item)) {
     this.file_type = item
    }
   })
   if (!this.file_type) {
    this.remove_bin()
    return this.$message.warning('文件类型错误')
   }
   this.convertFileToBinary(file.raw).then(binaryData => {
    // 将二进制数据发送到后台(处理方式1)
    this.body = binaryData
   })
   this.uploadToBase64(file.raw).then(data => {
    this.body1 = this.convertDataToBlob(data.result) // 传二进制（处理方式2）
    // this.body = data.result // 传base64
   })
  },
  // 将文件转为base64
  uploadToBase64(file) {
   // 核心方法，将文件转成base64字符串形式
   return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = function() {
     // 文件转base64完成后返回reader对象
     resolve(reader)
    }
    reader.onerror = reject
   })
  },
  // 转为二进制（后面用这种方式）
  convertFileToBinary(file) {
   return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = () => {
     resolve(reader.result)
    }
    reader.onerror = reject
    reader.readAsArrayBuffer(file)
   })
  },
  // 转为二进制
  convertDataToBlob(base64Data) {
   let format = this.file_type
   let base64 = base64Data
   let code = window.atob(base64.split(',')[1])
   let aBuffer = new window.ArrayBuffer(code.length)
   let uBuffer = new window.Uint8Array(aBuffer)
   for (let i = 0; i < code.length; i++) {
    uBuffer[i] = code.charCodeAt(i) & 0xff
   }
   let blob = null
   try {
    blob = new Blob([uBuffer], {
     type: format,
    })
   } catch (e) {
    window.BlobBuilder =
     window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder
    if (e.name == 'TypeError' && window.BlobBuilder) {
     let bb = new window.BlobBuilder()
     bb.append(uBuffer.buffer)
     blob = bb.getBlob(this.file_type)
    } else if (e.name == 'InvalidStateError') {
     blob = new Blob([aBuffer], {
      type: format,
     })
    } else {
    }
   }
   return blob
  },
}
</script>