vue如何预览后端传来的二进制图片
作者:Dawnchen1
这篇文章主要介绍了vue如何预览后端传来的二进制图片,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
vue预览后端传来的二进制图片
1.新建一个对话框
用来显示图片
<el-dialog title="" :visible.sync="imgdialog" width="70%"> <img :src="src" alt=""/> </el-dialog>
2.下载方法
可以将request替换成axios
download(row) { this.$request({ url: baseUrl + '/file/download', method: 'post', data: row, responseType: 'arraybuffer' //这个响应类型必须要写 }).then(res => { // console.log(res) //二进制文件打印出来是乱码 this.src = 'data:image/jpeg;base64,' + this.arrayBufferToBase64(res) this.imgdialog = true }).catch(err => { console.log(err) }) },
3.转码方法
arrayBufferToBase64(buffer) { var binary = '' var bytes = new Uint8Array(buffer) var len = bytes.byteLength for (var i = 0; i < len; i++) { binary += String.fromCharCode(bytes[i]) } return window.btoa(binary) }
vue实现文件预览功能的前端
预览文件的前端
省略点击按钮点击触发showdialogview()方法的代码
第一种方法
先在template中加入一个input框,绑定一个字符串类型的变量
写showdialogview()方法
调用后台的方法,如果返回的不是null(后台返回的数据是一行一行返回的),就使用for循环,添加到变量中去。
<template> <div class="content"> <!--文件预览--> <el-dialog title="数据预览" :visible.sync="dialogvisibleview" > <el-input type="textarea" :rows="10" placeholder="" v-model="dataview"> </el-input> </el-dialog> </div> </template>
<script> import api from '../../api/api' import $ from 'jquery'; import axios from 'axios'; export default { name: "DataFile", inject: ['reload'], data(){ return { dialogvisibleview: false, // 文件预览 dataview: '' } }, methods:{ //预览文件 showdialogview(id) { this.dataview =''; var dataView = new FormData; // var num=20; dataView.append("id",id); api.getDataDetail(dataView).then((response) => response.json()) .then((data) => { if(data!=null){ this.dialogvisibleview = !this.dialogvisibleview; //alert(data.data[0]); for (var i=0;i<=data.data.length-1;i++){ this.dataview+=data.data[i]+"\n"; } } }); } }, created: function () { console.log('cteated 钩子执行...'); } } </script>
第二种方法
可以在对话框中加入一个table标签,在tbody标签中使用v-html绑定变量,这样,在字符串中的标签可以展示出来
因为后台给的接口返回的数据是数组中的一个下标对应的一行数据,把每一行的数据拆分成字符串数组,然后放在单元格中,这样展示出来比较整齐,还可以添加样式。
<template> <div class="content"> <!--预览的模态框--> <el-dialog title="文件内容预览" :visible.sync="previewVisible" modal-append-to-body="false" append-to-body="true" style="height: 100%;"width="80%"> <p style="color:red">若可视化,请选择数值列</p> <div id="modalContent" style="height: 600px;overflow:scroll;overflow-x:auto;overflow-y:auto "> <table id="box-table" style="border-collapse:collapse;height:60px;"> <tbody id="table_body" v-html="datafileView"></tbody></table> </div> </el-dialog> </div> </template>
<script> import api from '../../api/api' import $ from 'jquery'; import axios from 'axios'; export default { name: "DataFile", inject: ['reload'], data(){ return { previewVisible:false, // 预览模态框的 datafileView:'', // 预览的表格 } }, methods:{ // 打开预览的模态框 openPreview (id){ this.previewVisible = true; this.viewData(id); }, // 在后台查询预览 viewData (fid) { this.datafileView=""; var dataView = new FormData; dataView.append("id",fid); api.getDataDetail(dataView).then((response) => response.json()) .then((data) => { var viewDataString="<tr>"; var dataArray = ((String)(data.data[0])).split(","); for(var i =0;i<dataArray.length;i++){ viewDataString=viewDataString+"<td style='text-align:center;width:10%'><input type='radio' name='tableheader' value='"+i+"' @click='f1()' /></td>"; } viewDataString = viewDataString+"</tr><tr style='border-color:#1eb8f7;border-bottom-style:solid;border-width:1px'>"; for(var i =0;i<dataArray.length;i++){ viewDataString = viewDataString+"<th style='text-align:center;width:10%'>"+dataArray[i]+"</th>"; } viewDataString = viewDataString+"</tr>"; console.log(data.data.length); for(var x=1;x<data.data.length;x++){ var dataArray = ((String)(data.data[x])).split(","); viewDataString = viewDataString+"<tr>"; for(var i =0;i<dataArray.length;i++){ viewDataString = viewDataString+"<td style='text-align:center;width:15%'>"+dataArray[i]+"</td>"; } viewDataString = viewDataString+"</tr>"; } this.datafileView =viewDataString; console.log(this.datafileView ); }); } }, created: function () { console.log('cteated 钩子执行...'); } } </script>
缺点:使用v-html,即使标签在浏览器中展示出来,但是里面的方法不可以使用,里面的方法失效。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。