Java教程

el-upload上传文件使用方式

本文主要是介绍el-upload上传文件使用方式,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

上传二进制文件修改请求头:Content-Type: application/octet-stream

<el-upload
     ref="upload"
     drag
     action="#"
     accept=".bin"
     :limit="1"
     :on-remove="remove_bin"
     :on-exceed="handleExceed"
     :on-change="handle_bin_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">只可上传一个.bin格式文件</div>
    </el-upload>
// 超出上传文件数目的提示
  handleExceed() {
   return this.$message.warning('只能上传一个文件...')
  },
  // 移除文件
  remove_bin() {
   this.body = ''
   this.headers.type = ''
  },
  // 文件改变时变化
  handle_bin_change(file, fileList) {this.uploadImgToBase64(file.raw).then(data => {
   // 此时的 data.result 为 base64 类型数据
    this.body = this.convertImgDataToBlob(data.result) // body 为转化后的二进制数据
   })
  },
  // 将.bin转为base64
  uploadImgToBase64(file) {
   // 核心方法,转成base64字符串形式
   return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = function() {
     // 图片转base64完成后返回reader对象
     resolve(reader)
    }
    reader.onerror = reject
   })
  },
  // 转为二进制
  convertImgDataToBlob(base64Data) {
   var format = 'bin' // 随自己的文件类型修改
   var base64 = base64Data
   var code = window.atob(base64.split(',')[1])
   var aBuffer = new window.ArrayBuffer(code.length)
   var uBuffer = new window.Uint8Array(aBuffer)
   for (var i = 0; i < code.length; i++) {
    uBuffer[i] = code.charCodeAt(i) & 0xff
   }
   var 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) {
     var bb = new window.BlobBuilder()
     bb.append(uBuffer.buffer)
     blob = bb.getBlob('bin')
    } else if (e.name == 'InvalidStateError') {
     blob = new Blob([aBuffer], {
      type: format,
     })
    } else {
    }
   }
   return blob
  },

 

这篇关于el-upload上传文件使用方式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!