element upload上传前对文件专门bs64上传
<!-- 文件上传 --> <template> <section class="file-upload"> <p class="title">提案信息</p> <el-upload class="upload-demo" ref="fileUpload" accept=".xls,.xlsx" :class="{'pointer-events' : fileShow}" :action="action" :data="excelPath" :on-change="fileData" :on-success="fileSuccess" :show-file-list="fileShow" :limit="1" :file-list="fileList" :before-remove="beforeRemove" :disabled="disabled" :auto-upload="false" > <el-button :type=" disabled ? 'info' : 'primary'" >导入发起提案</el-button> </el-upload> </section> </template> <script> export default { data() { return { action: process.env.VUE_APP_BASE_API + process.env.VUE_APP_REQURL +"/fileImport/getFileInfo", excelPath: { "excelPath": "" } }; }, computed:{ fileShow : { get : function () { return this.fileList.length > 0 ? true : false }, set : function (newValue) { } }, disabled : { get : function () { return this.$route.query.id ? true : false }, set : function (newValue) { } }, }, props:{ fileList: Array,Object, }, methods: { beforeRemove(file, fileList) { return this.$confirm(`确定移除 ${ file.name }?`).then(()=>{ this.$emit('dataInit') }); }, fileSuccess (response, file, fileList) { this.getData(response.data) this.fileShow = true this.disabled = true this.$emit('addFile',{name: file.name, url: ''}) }, getData(val){ this.$emit('getData',val) }, // 获取本地路径地址 fileData(file){ let reader = new FileReader() reader.readAsDataURL(file.raw);// 这里也可以直接写参数event.raw reader.onload=()=>{ this.excelPath.excelPath = reader.result this.$refs.fileUpload.submit(); } }, } } </script>