后端直接返回一个图片对象,前端如何接收并显示在图片上

1.在axios分装时根据url判断将请求的响应格式改为‘blob’格式,axios默认为json
// 请求拦截器
request.interceptors.request.use(
    (config) => {
        const tokenStr = sessionStorage.getItem("token");
        if (tokenStr) {
            config.headers.token = tokenStr;
        }
        // 判断url改变响应数据格式
        if (config.url === '/user/image_code') {
            config.responseType = 'blob'
        }
        return config; // 返回这个配置对象,如果没有返回,这个请求就不会发送出去
    },
    (error) => {
        return Promise.reject(error);
    }
)
2. 在使用时
    async imageCode() {
      //接收后端接口返回
      const result = await getImageCode()
      //接收后转为blob对象  
      let blob = new Blob([result.data], {type: "image/png"});
      //转换为url对象
      let url = window.URL.createObjectURL(blob);
      this.imageUrl = url;
    },

你可能感兴趣的:(前端,前端)