ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

el-upload上传文件使用方式

2022-03-28 20:34:42  阅读:427  来源: 互联网

标签:bin el base64 upload window reader var new 上传


上传二进制文件修改请求头: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 },

 

标签:bin,el,base64,upload,window,reader,var,new,上传
来源: https://www.cnblogs.com/lyt520/p/16068811.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有