首先在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)

GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐