Ts中El-image展示图片需要token怎么办，写成组件形式

最新推荐文章于 2024-04-02 20:16:54 发布

行走的茶白

最新推荐文章于 2024-04-02 20:16:54 发布

阅读量461

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/chabaimgg/article/details/134032665

版权

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>