vue中下载图片跨域

首先在vue.config.js中配置跨域

      '/upload': {
        //代理图片下载的接口
        target: "http://resource.zhuyiyun.com",
        changeOrigin: true,
        secure: false, // 设置支持https协议的代理
        pathRewrite: {
          '^/upload': ''
        }
      }

由于项目中的请求是走的其他地址， 图片是前端上传到obs上的，所以需要配两个跨域。

写请求图片方法

/**
 * 
 * @param url 图片地址
 */
export async function getImage(url: string) {
  const { data } = await Axios({
    method: "GET",
    url: "/upload" + url,
    responseType: "blob"
  })

  return data;
}

下载图片方法

        down: (file: IfFileList) => {
          getImage(file.url).then(res => {
            const fileName = file.fileName;
            const myBlob = new Blob([res], { type: "image/jpeg" });
            const link = document.createElement("a");
            link.href = URL.createObjectURL(myBlob);
            link.download = fileName;
            link.click();
            link.remove();
            URL.revokeObjectURL(link.href);
          })
        }

ok

对于浏览器打不开的文件也可以使用window.open(url)