接口返回的是一个图片文件而不是url 前端如何显示？

A-sleep

已于 2022-11-10 16:18:42 修改

阅读量1.8k

点赞数

分类专栏： Vue 文章标签：前端 javascript 开发语言

于 2022-11-09 15:58:25 首次发布

本文链接：https://blog.csdn.net/fellasleep/article/details/127771347

版权

Vue 专栏收录该内容

39 篇文章 2 订阅

订阅专栏

请求后端接口返回的时一张图片如何在img中显示?

preview里查看就是显示一张图片

效果预览：

console.log(res):

以下是处理方法：（亲测有效）

@/api/orderService

//根据模型id获取流程模型png
export const reqGetActivitiProcessModelBpmnPng = (id) => {
  return request({
    url: req6+ `/activitiProcessModel/getActivitiProcessModelBpmnPng/${id} `,
    method: 'get',
    responseType: 'arraybuffer' // ++
  })
}

<el-form-item label="流程模型:" prop="processModelId">
        <el-select
          style="width: 55%"
          v-model="activitiWorkOrderClassify.processModelId"
          @change="selectChange"
        >
          <el-option
            v-for="item in modelArr"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          /> </el-select
        > 
        <span style="font-weight: 700; margin-left: 20px"> 预览模型: </span>
        <div style="
            position: absolute;
            width: 120px;
            height: 40px;
            right: 0;
            top: 0;">
        // 根据模型id显示预览图片效果
          <el-image
            :src="imgSrc"
            :preview-src-list="imgslist"
            ref="idface"
            style="width: 100%; height: 40px"
          />
        </div>
      </el-form-item>

methods: {
 async selectChange(val) {
      const res = await reqGetActivitiProcessModelBpmnPng(val);
      let u8a = new Uint8Array(res).reduce((res, byte) => res + String.fromCharCode(byte),
        "");
      this.imgSrc = `data:image/png;base64, ${btoa(u8a)}`; //图片显示出来了
      this.imgslist = [this.imgSrc];//放大预览
    },
}

更多方法可以参考：https://segmentfault.com/q/1010000016935073