springboot+vue2获取服务器的图片以二进制流的方式返回给vue前端

@GetMapping("/getUnlimited")
public ResponseEntity<byte[]> getUnlimited(@RequestParam String url) {
    OkHttpClient client = new OkHttpClient();
    Request request = null;
    try {
        request = new Request.Builder()
                .url(url)
                .build();
    } catch (Exception e) {
        log.error(e.getMessage(), e);
    }

    try (Response response = client.newCall(request).execute()) {
        if (!response.isSuccessful()) {
            return null;
        }
        byte[] imageBytes = response.body().bytes();
        String contentType = response.header("Content-Type");
        HttpHeaders headers = new HttpHeaders();
        headers.setContentType(MediaType.parseMediaType(contentType));

        return ResponseEntity.ok()
                .headers(headers)
                .body(imageBytes);
    } catch (IOException e) {
        log.error(e.getMessage(), e);
    }
    return null;
}

vue

      const token = Vue.ls.get(ACCESS_TOKEN)
      this.headers = { 'X-Access-Token': token }

      this.axios({
        method: 'get',
        url: '/appletVehicle/recordSingle/getUnlimited',
        responseType: 'blob',
        params: {
          // 这是提交的参数,如果是post 的就是 data
          url: 'http://10.132.253.96:7010/file_view/dandong/vehicle-access/pc/vehicle/channelVehicle/kakou/20250220/tmp_579b96e733c98be317da73bf0e26b98e14dee3003598d481_1740053087162.jpg',
        },
        headers: { 'X-Access-Token': token },
      })
        .then((response) => {
           
          // 返回的文件流数据
          let url = window.URL.createObjectURL(response) // 将他转化为路径

          this.model.driverLicense1 = url // 将转换出来的路径赋值给变量,其实和上一步结合就可以
          this.model.driverLicense2 = url // 将转换出来的路径赋值给变量,其实和上一步结合就可以
        })
        .catch((response) => {
          this.$message.error(response)
        })

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值