• elupload上传文件使用方式


    上传二进制文件修改请求头: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 },
  • 相关阅读:
    准备 FRM 考试——方法、工具与教训
    930. 和相同的二元子数组 前缀和
    1906. 查询差绝对值的最小值 前缀和
    剑指 Offer 37. 序列化二叉树 二叉树 字符串
    815. 公交路线 BFS
    518. 零钱兑换 II dp 完全背包
    1049. 最后一块石头的重量 II dp
    5779. 装包裹的最小浪费空间 二分
    5778. 使二进制字符串字符交替的最少反转次数 字符串 滑动窗口
    474. 一和零 dp
  • 原文地址:https://www.cnblogs.com/lyt520/p/16068811.html
Copyright © 2020-2023  润新知