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