axios({
? ? ? ? method: 'get',
? ? ? ? url,
? ? ? ? responseType: 'arraybuffer' // 最為關鍵
? ? ? })
? ? ? ? .then(function (response) {
? ? ? ? ? that.src = 'data:image/jpeg;base64,' + that.arrayBufferToBase64(response.data)
? ? ? ? })

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)
? ? },

?<img :src="src" alt="驗證碼">

<el-image v-loading="loading" style='height: 480px;' :src="imgsrc"></el-image>

// /api/plan.js文件請求方法
export function getFlowPhoto(data) {
? ? return request({
? ? ? ? url: '/xxx/xxxx/getFlowPhoto',
? ? ? ? method: 'post',
? ? ? ? responseType: 'blob',
? ? ? ? data
? ? })
}

<script>
? import {getFlowPhoto} from "@/api/plan.js";
? export default {
? ? data() {
? ? ? return {
? ? ? ? imgsrc:'',
? ? ? ? loading:false,
? ? ? }
? ? },
? ? mounted() {},
? ? methods: {
? ? ? fetchData() {
? ? ? ? this.loading = true;
? ? ? ? var that = this;
? ? ? ? getFlowPhoto({id:xxx}).then((res) => {
? ? ? ? ? if(res.code == 401){
? ? ? ? ? ? this.$message({
? ? ? ? ? ? ? message: res.message,
? ? ? ? ? ? ? type: "error",
? ? ? ? ? ? });
? ? ? ? ? }
? ? ? ? ? if(res){
? ? ? ? ? ? const myBlob = new window.Blob([res], {type: 'image/jpeg'})
? ? ? ? ? ? const qrUrl = window.URL.createObjectURL(myBlob)
? ? ? ? ? ? this.imgsrc = qrUrl;
? ? ? ? ? ? this.loading = false;
? ? ? ? ? }
? ? ? ? });
? ? ? },
? ? }
? }
</script>