vue preview binary pictures from the backend
1. Create a new dialog box
Used to display pictures
<el-dialog title="" :="imgdialog" width="70%"> <img :src="src" alt=""/> </el-dialog>
2. Download method
Replace request with axios
download(row) {
this.$request({
url: baseUrl + '/file/download',
method: 'post',
data: row,
responseType: 'arraybuffer' //This response type must be written }).then(res => {
// (res) // The binary file is printed out as garbled = 'data:image/jpeg;base64,' + this.arrayBufferToBase64(res)
= true
}).catch(err => {
(err)
})
},3. Transcoding method
arrayBufferToBase64(buffer) {
var binary = ''
var bytes = new Uint8Array(buffer)
var len =
for (var i = 0; i < len; i++) {
binary += (bytes[i])
}
return (binary)
}vue front-end to implement file preview function
The front end of the preview file
Omit the code that triggers the showdialogview() method by clicking the button
The first method
First add an input box to the template and bind a variable of string type
Write showdialogview() method
Call the background method. If the returned data is not null (the data returned by the background is returned by row by line), use a for loop and add it to the variable.
<template> <div class="content"> <!--File preview--> <el-dialog title="Data Preview" :="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, // File preview dataview: ''
}
},
methods:{
//Preview file showdialogview(id) {
='';
var dataView = new FormData;
// var num=20;
("id",id);
(dataView).then((response) => ())
.then((data) => {
if(data!=null){
= !;
//alert([0]);
for (var i=0;i<=-1;i++){
+=[i]+"\n";
}
}
});
}
},
created: function () {
('cteated hook executes...');
}
}
</script>The second method
You can add a table tag to the dialog box and use v-html to bind variables in the tbody tag, so that the tags in the string can be displayed.
Because the data returned by the interface given by the background is a row of data corresponding to a subscript in the array, the data of each row is split into a string array and then placed in a cell. This shows it neatly and you can also add styles.
<template> <div class="content"> <!--Preview modal box--> <el-dialog title="File Content Preview" :="previewVisible" modal-append-to-body="false" append-to-body="true" style="height: 100%;"width="80%"> <p style="color:red">If visualized，Please select the numeric column</p> <div style="height: 600px;overflow:scroll;overflow-x:auto;overflow-y:auto "> <table style="border-collapse:collapse;height:60px;"> <tbody 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, // Preview modal box datafileView:'', // Preview form }
},
methods:{
// Open the preview modal box openPreview (id){
= true;
(id);
},
// Query preview in the background viewData (fid) {
="";
var dataView = new FormData;
("id",fid);
(dataView).then((response) => ())
.then((data) => {
var viewDataString="<tr>";
var dataArray = ((String)([0])).split(",");
for(var i =0;i<;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<;i++){
viewDataString = viewDataString+"<th style='text-align:center;width:10%'>"+dataArray[i]+"</th>";
}
viewDataString = viewDataString+"</tr>";
();
for(var x=1;x<;x++){
var dataArray = ((String)([x])).split(",");
viewDataString = viewDataString+"<tr>";
for(var i =0;i<;i++){
viewDataString = viewDataString+"<td style='text-align:center;width:15%'>"+dataArray[i]+"</td>";
}
viewDataString = viewDataString+"</tr>";
}
=viewDataString;
( );
});
}
},
created: function () {
('cteated hook executes...');
}
}
</script>Disadvantages: Using v-html, even if the tag is displayed in the browser, the methods inside cannot be used, and the methods inside are invalid.
The above is personal experience. I hope you can give you a reference and I hope you can support me more.