1. 程式人生 > 其它 >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 },