inleft
2022-03-01 88f419df77ade235ea5e5e24be204842a24b7b33
commit | author | age
9bcb19 1 <template>
I 2   <a-modal
3     title="预览图片"
4     :footer="null"
5     :width="900"
6     :visible="visible"
7     @cancel="handleCancel"
8   >
9     <a-spin :spinning="divLoading">
10       <div style="text-align: center">
11         <img :src="src" style="max-width: 99%">
12       </div>
13     </a-spin>
14   </a-modal>
15 </template>
16 <script>
17   import { sysFileInfoPreview } from '@/api/modular/system/fileManage'
18   export default {
19     data () {
20       return {
21         visible: false,
22         src: '',
23         divLoading: false
24       }
25     },
26     methods: {
27       /**
28        * 初始化
29        */
30       preview (record) {
31         this.visible = true
32         this.divLoading = true
33         this.sysFileInfoPreview(record)
34       },
35       /**
36        * 获取图片并转为链接
37        */
38       sysFileInfoPreview (record) {
39         sysFileInfoPreview({ id: record.id }).then((res) => {
40           this.divLoading = false
41           this.downloadfile(res)
42         }).catch((err) => {
43           this.divLoading = false
44           this.$message.error('预览错误:' + err.message)
45         })
46       },
47       /**
48        * 转图片类型
49        */
50       downloadfile (res) {
51         const blob = new Blob([res])
52         this.src = window.URL.createObjectURL(blob)
53       },
54       handleCancel () {
55         this.src = ''
56         this.visible = false
57       }
58     }
59   }
60 </script>