vue怎么預(yù)覽后端傳來(lái)的二進(jìn)制圖片

本文小編為大家詳細(xì)介紹“vue怎么預(yù)覽后端傳來(lái)的二進(jìn)制圖片”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“vue怎么預(yù)覽后端傳來(lái)的二進(jìn)制圖片”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

vue預(yù)覽后端傳來(lái)的二進(jìn)制圖片

1.新建一個(gè)對(duì)話框

用來(lái)顯示圖片

<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'  //這個(gè)響應(yīng)類型必須要寫
      }).then(res => {
        // console.log(res)  //二進(jìn)制文件打印出來(lái)是亂碼
         this.src = 'data:image/jpeg;base64,' + this.arrayBufferToBase64(res)
         this.imgdialog = true
      }).catch(err => {
        console.log(err)
      })
    },

3.轉(zhuǎn)碼方法

    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實(shí)現(xiàn)文件預(yù)覽功能的前端

預(yù)覽文件的前端

省略點(diǎn)擊按鈕點(diǎn)擊觸發(fā)showdialogview()方法的代碼

第一種方法：

先在template中加入一個(gè)input框，綁定一個(gè)字符串類型的變量

寫showdialogview()方法

調(diào)用后臺(tái)的方法，如果返回的不是null（后臺(tái)返回的數(shù)據(jù)是一行一行返回的）,就使用for循環(huán)，添加到變量中去。 

<template>
  <div class="content">
    <!--文件預(yù)覽-->
    <el-dialog title="數(shù)據(jù)預(yù)覽" :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, // 文件預(yù)覽
        dataview: ''
      }
    },
    methods:{
      //預(yù)覽文件
      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 鉤子執(zhí)行...');
    }
  }
</script>

第二種方法：

可以在對(duì)話框中加入一個(gè)table標(biāo)簽，在tbody標(biāo)簽中使用v-html綁定變量，這樣，在字符串中的標(biāo)簽可以展示出來(lái)

因?yàn)楹笈_(tái)給的接口返回的數(shù)據(jù)是數(shù)組中的一個(gè)下標(biāo)對(duì)應(yīng)的一行數(shù)據(jù)，把每一行的數(shù)據(jù)拆分成字符串?dāng)?shù)組，然后放在單元格中，這樣展示出來(lái)比較整齊，還可以添加樣式。

<template>
  <div class="content">
    <!--預(yù)覽的模態(tài)框-->
    <el-dialog title="文件內(nèi)容預(yù)覽" :visible.sync="previewVisible" modal-append-to-body="false" append-to-body="true" width="80%">
      <p >若可視化，請(qǐng)選擇數(shù)值列</p>
      <div id="modalContent" >
        <table id="box-table" >
          <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,  // 預(yù)覽模態(tài)框的
         datafileView:'', // 預(yù)覽的表格
      }
    },
    methods:{
      // 打開(kāi)預(yù)覽的模態(tài)框
      openPreview (id){
        this.previewVisible = true;
        this.viewData(id);
      },
      // 在后臺(tái)查詢預(yù)覽
      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 鉤子執(zhí)行...');
    }
  }
</script>

缺點(diǎn)：使用v-html，即使標(biāo)簽在瀏覽器中展示出來(lái)，但是里面的方法不可以使用，里面的方法失效。 

讀到這里，這篇“vue怎么預(yù)覽后端傳來(lái)的二進(jìn)制圖片”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。