1.创建组件tokenImg
<template>
<el-image :src="imgBase64" :preview-src-list="imgAllchange"></el-image>
</template>
<script lang="ts">
import ComponentBase from '@src/views/ComponentBase'
import PageBase from '@src/views/PageBase'
import axios from 'axios'
import { Component, Prop, Vue, Emit, Watch } from 'vue-property-decorator'
@Component({
components: {}
})
export default class tokenImg extends PageBase {
private imgBase64: string = ''
private imgAllchange: any[] = []
@Prop()
imgUrl: any //基础物料信息
@Prop({
default: () => {
return []
}
})
srcList: any[]
@Watch('imgUrl', { deep: true })
private async onImgUrlChanged(val) {
if (!val) {
this.imgBase64 = ''
}
let a = []
//核心代码
axios.get(val, { responseType: 'blob', headers: { token: this.$store.state.system.token } }).then((res) => {
this.imgBase64 = URL.createObjectURL(res.data)
a.push(this.imgBase64)
})
}
//核心代码
private srcListHandle() {
this.srcList.forEach((item) => {
axios.get(item, { responseType: 'blob', headers: { token: this.$store.state.system.token } }).then((res) => {
let imgs = URL.createObjectURL(res.data)
this.imgAllchange.push(imgs)
})
})
}
mounted() {
this.$nextTick()
let x = this.imgUrl
this.onImgUrlChanged(x)
this.srcListHandle()
// debugger
}
}
</script>
<style lang="less" scoped></style>
2.使用
<vxe-column field="warehouseImage" title="库位照片" align="center">
<template #default="{ row, rowIndex }">
<tokenImg v-for="(item, index) in row.warehouseImage" style="width:50px;height:50px" :srcList="row.warehouseImage" :imgUrl="item" :key="index" />
<!-- <el-image v-for="(item, index) in row.warehouseImage" :src="item" :preview-src-list="row.warehouseImage" :key="index" style="width: 100px; height: 100px"></el-image> -->
</template>
</vxe-column>