前端通过阿里云oss的url获取图像并转为File对象

前端通过阿里云oss的url获取图像转为File对象

场景概述

1. 在添加商品时，用户上传图片，系统将获取图片文件（File对象）并将其上传至服务器接口。
2. 当用户需要修改商品信息时，系统会从后端获取到图片的阿里云OSS存储路径。
3. 由于在修改过程中没有原始图像的File对象，直接上传原有商品图像变得不可行。

解决方案流程

1. 获取图片数据： 通过HTTP请求从阿里云OSS获取图片的原始数据。
2. 转换为Blob对象： 将获取到的图片数据转换为Blob对象，以便在Web环境中使用。
3. 创建File对象： 使用Blob对象来创建一个新的File对象，这样就可以模拟原始的文件上传过程，使得修改商品时能够重新上传原有的商品图像。

环境准备

• vite项目（需要给阿里云oss设置跨域反向代理，其他前端构建工具也可）
• 阿里云oss
• axios （npm 下载即可）

跨域配置

import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd(), "");
  console.log(env.VITE_APP_URL);

  return {
    plugins: [vue()],
    server: {
      proxy: {
        "/img": {
          target: "设置为自己的阿里云oss路径",
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/img/, ""),
        },
      },
      base: "./",
    },
  };
});

代码实现

在HTTP请求头中加入"responseType": 'blob'，这样HTTP请求响应的数据就是Blob对象。可以直接创建File对象。

const getImage = (url) => {
  // 传入阿里云oss路径：https://bao-tlias.oss-cn-hangzhou.aliyuncs.com/a4ac05ed-47b0-471a-bd0e-962a83c42159.png
  const filename = url.split('/').pop(); // 获取文件名
  axios.get(`/img/${filename}`, { responseType: 'blob' })
    .then((rst) => {
      const compressedFile = new File([rst.data], filename, { type: rst.data.type });
      imgList.value.push(url); // 回显图片
      console.log(filename);
      fileList.value.push(compressedFile); // file对象
    })
    .catch((err) => {
      console.error("加载图片出现错误，请刷新");
    });
};

nginx转发

路径前^~符号一定要加上，不然访问静态资源会报404。

location ^~ /img/ {
  proxy_pass https://bao-tlias.oss-cn-hangzhou.aliyuncs.com/; # 改为自己的阿里云oss路径
}