使用element UI的upload组件
<el-upload action="" :auto-upload="false" :file-list="fileList" :limit="1" :multiple="false" :on-change="handleChange" :on-preview="handlePreview" :on-error="uploadError" :on-remove="removefile" :show-file-list="true" accept=".btw" ref="upload" > <el-button @click="handleExport()" slot="trigger" type="text">{{$t('template_define.button_upload')}}</el-button> </el-upload>
methods方法
// 文件上传触发 handleChange (file, fileList) { let _this = this if (this.formdata.printMode !== 'Bartender') return this.formdata.remark = file.name let reader = new FileReader() reader.readAsDataURL(file.raw) reader.onload = function () { _this.fileList = fileList _this.bartenderstring = reader.result.substring(reader.result.indexOf('base64') + 'base64,'.length) } }, decode (base64) { let decode = window.atob(base64) var len = decode.length var bytes = new Uint8Array(len) for (var i = 0; i < len; i++) { bytes[i] = decode.charCodeAt(i) } // let str = decodeURI(decode) return bytes }, // 文件点击触发 handlePreview (file) { try { let content = this.decode(this.bartenderstring) const blob = new Blob([content]) let a = document.createElement('a'); a.download = file.name + '.btw'; a.href = URL.createObjectURL(blob); let event = new MouseEvent('click'); a.dispatchEvent(event); } catch (e) { console.log(e) } }