当前位置： 首页 > news >正文

前端实现上传图片到OSS(Vue3+vant)

news 来源：原创 2025/6/22 3:00:41

首先，下面这些信息从阿里云服务器OSS管理中获取

aliyun:
    oss:
        file:
            endpoint: "oss-cn-beijing.aliyuncs.com"
            keyid: "xxxxxxxxx"
            keysecret: "xxxxxxxxxxxx"
            bucketname: "xxxx"

一、安装OSS

npm install ali-oss

二、以下步骤中解决引入ts校验的，有些地方比较多余，想试试也行，直接跳过吧

在 TypeScript 中，如果你遇到“无法找到模块 'ali-oss' 的声明文件”的错误，通常是因为该模块没有提供类型定义文件

解决方法:

1.安装类型定义:

如果 ali-oss 没有提供类型定义文件，你可以尝试安装 @types/ali-oss，但目前可能没有可用的类型定义。

npm install --save-dev @types/ali-oss
pnpm add -D @types/ali-oss

如果没有这个包，你可以手动创建一个类型定义文件。

2.手动创建类型定义:

  • 在你的项目中创建一个类型定义文件，例如 src/types/ali-oss.d.ts，并添加以下内容：
declare module 'ali-oss' {
  export interface OSSClient {
    put(object: string, file: any, options?: any): Promise<any>;
    // 添加其他需要的方法和属性
  }

  export default function OSS(options: {
    region: string;
    accessKeyId: string;
    accessKeySecret: string;
    bucket: string;
  }): OSSClient;
}

  • 更新 tsconfig.json:

    • 确保 TypeScript 配置文件 (tsconfig.json) 中包含了类型定义文件的路径：
{
  "compilerOptions": {
    "typeRoots": [
      "./node_modules/@types",
      "./src/types"  // 添加自定义类型位置
    ]
  }
}

3.扩展:

使用 require:

  • 如果你不想定义类型，可以使用 require 来引入模块，这样 TypeScript 不会检查类型：
const OSS = require('ali-oss');

总结：通过手动创建类型定义文件或使用 require，可以解决无法找到模块声明文件的问题。

扩展:

endpoint

  • oss-cn-beijing.aliyuncs.com:
    • oss：表示这是 OSS 服务。
    • cn：表示中国区域。
    • beijing：表示具体的地理区域，即北京。

其他区域示例

如果你有其他的 endpoint，可以根据以下格式进行解析：

  • 上海: 

oss-cn-shanghai.aliyuncs.com -> region: 'cn-shanghai'

  • 广州: 

oss-cn-guangzhou.aliyuncs.com -> region: 'cn-guangzhou'

  • 香港: 

oss-ap-hongkong.aliyuncs.com -> region: 'ap-hongkong'

确认区域:

如果不确定，可以在阿里云控制台中查看你的 Bucket 的具体区域，或者查阅阿里云的官方文档，以获取更详细的信息。

三、配置阿里云 OSS:

// 配置阿里云 OSS
// Bucket名称，用于标识OSS存储空间
const BUCKET_NAME = 'xxxxx';
// OSS的地域节点，用于访问OSS服务的域名
const ENDPOINT = 'oss-cn-beijing.aliyuncs.com';

// 创建OSS客户端实例
const client = new OSS({
  region: 'oss-cn-beijing',    // 地域，例如：华北2（北京）
  accessKeyId: 'xxxxxxxxx',      // 访问密钥ID，用于身份验证
  accessKeySecret: 'xxxxxxxx',  // 访问密钥密码
  bucket: BUCKET_NAME,         // 指定操作的Bucket
  secure: true,               // 使用HTTPS协议
  cname: false,              // 是否使用自定义域名，false表示使用阿里云默认域名
});
  • secure : 默认为 false ，表示使用 HTTP 协议。不写的话可能会存在安全风险，建议在生产环境中设置为 true 使用 HTTPS。
  • cname : 默认为 false ，表示使用阿里云默认域名。如果不需要自定义域名，可以不写这个配置。
  • timeout : 默认为 60000 （60秒）。如果不写，上传超时时间就是默认的 60 秒，对于大多数场景来说已经足够。

Bucket 名称:

这个一般是未公开的,所以需要再定一一个在外面,OSS里面那个删除即可,不需要,也无法使用

  1. 在对象的外面定义:
const BUCKET_NAME = 'xxxxx'; // 定义 Bucket 名称,这里换成你自己的

        2.并在需要生成文件 URL 时使用该常量，ENDPOINT同理：

// 生成文件的在线链接

const url = `https://${BUCKET_NAME}.${ENDPOINT}/${fileName}`;

ENDPOINT:

在生成 URL 时，client.options.endpoint 是用于获取 OSS 访问地址的一部分。然而，client.options 本身可能并不包含 endpoint 属性。通常，endpoint 是在创建 OSS 客户端时指定的配置选项之一，但它并不会直接暴露在 options 中。

可以在创建 OSS 客户端时直接保存 endpoint，然后在生成 URL 时使用这个值。以下是如何实现的示例代码：

const ENDPOINT = 'oss-cn-beijing.aliyuncs.com'; // 替换为实际 Endpoint

四、上传文件总流程:

<script setup lang="ts">
import { ref } from 'vue';
import { showToast } from 'vant'; // 导入 Vant 的类型
import type { UploaderFileListItem } from 'vant'; // 正确导入类型
import OSS from 'ali-oss';


// 声明 fileList，类型为 UploaderFilelistItem[]
const fileList = ref<UploaderFileListItem[]>([]);

// oversize 事件处理函数
const maxFileSize = 50 * 1024 * 1024; // 50MB
const onOversize = (file: File) => {
  if (file.size > maxFileSize) {
    showToast(`文件大小不能超过 ${maxFileSize / (1024 * 1024)}MB`);
    return false;
  }
  return true;
};
// 配置阿里云 OSS
// Bucket名称，用于标识OSS存储空间
const BUCKET_NAME = 'xxxxx'; // 替换成实际的
// OSS的地域节点，用于访问OSS服务的域名
const ENDPOINT = 'oss-cn-beijing.aliyuncs.com';

// 创建OSS客户端实例
const client = new OSS({
  region: 'oss-cn-beijing',    // 地域，例如：华北2（北京）
  accessKeyId: 'xxxxxxxx',      // 访问密钥ID，用于身份验证
  accessKeySecret: 'xxxxxxx',  // 访问密钥密码
  bucket: BUCKET_NAME,         // 指定操作的Bucket
  secure: true,               // 使用HTTPS协议
  cname: false,              // 是否使用自定义域名，false表示使用阿里云默认域名
  timeout: 60000             // 超时时间，单位：毫秒（这里设置为60秒）
});
// - secure : 默认为 false ，表示使用 HTTP 协议。不写的话可能会存在安全风险，建议在生产环境中设置为 true 使用 HTTPS。
// - cname : 默认为 false ，表示使用阿里云默认域名。如果不需要自定义域名，可以不写这个配置。
// - timeout : 默认为 60000 （60秒）。如果不写，上传超时时间就是默认的 60 秒，对于大多数场景来说已经足够。

// 上传文件的函数
const uploadFile = async (file: File) => {
  try {
    // 生成唯一文件名，包含文件夹路径
    // 获取当前日期
    const timestamp = new Date();
    const year = timestamp.getFullYear();
    const month = String(timestamp.getMonth() + 1).padStart(2, '0');
    const day = String(timestamp.getDate()).padStart(2, '0');
    const randomString = Math.random().toString(36).substring(2, 8);

    // 指定上传路径
    let filePath: string; // 添加变量声明

    // 判断文件类型
    const isImage = file.type.startsWith('image/');
    if (isImage) {
      // 添加随机字符串
      filePath = `png/${year}/${month}/${day}/${randomString}_${file.name}`;
    } else {
      filePath = `video/${year}/${month}/${day}/${randomString}_${file.name}`;
    }
    // 上传文件到 OSS
    // client.put() 方法会将文件上传到 OSS，其中：
    // - filePath 参数指定了文件在 OSS 中的存储路径
    //   - file 参数是要上传的文件对象
    const result = await client.put(filePath, file);
    // 生成文件的在线链接
    const url = `https://${BUCKET_NAME}.${ENDPOINT}/${filePath}`;
    console.log('上传成功:', result);
    console.log('文件在线链接:', url);
    return url;
  } catch (error) {
    console.error('上传失败:', error);
    return null; // 或者返回一个默认的错误链接
  }
};


const handleSubmit = async () => {
  fileList.value.forEach(item => {
    // 使用类型断言将 item.file 转换为 File 类型
    const file = item.file as File;
    uploadFile(file)
  });
};


// 提交文件函数
const submitFile = async () => {
  handleSubmit()
};

</script>
<template>
  <div>
    <van-uploader ref="mediaUploader" v-model="fileList" multiple class="uploader-container" accept="image/*,video/*"
      max-count="6" @oversize="onOversize" />
    <button @click="submitFile">点击上传</button>
  </div>
</template>

<style scoped>
/* 添加必要的样式 */
</style>

上传可能出现的问题:

  • 如果跨域,这个时候要去服务器配置允许访问的IP地址,防止出现跨域报错,这个是需要去官网到自己的服务器去配置的

关键点总结:

  • 获取服务器相关配置信息
  • 安装OSS
  • 使用自带的put方法上传图片
const result = await client.put(filePath, file);
  • 图片路径就是仓库路径拼接的，使用put方法上传会自动到那个仓库路径下去存 
  • 服务器需要配置跨域

 

相关文章：

  • 网络安全深度剖析
  • GPIO（嵌入式学习）
  • 当AI重构认知：技术狂潮下的教育沉思录
  • 信息学奥赛一本通（C++版)
  • java容器 LIst、set、Map
  • html+js 轮播图
  • Seaborn知识总结
  • ESP32+Mixly-WiFi
  • 22-接雨水
  • Deepseek Api Function Calling解析（tools、tool_calls）Deepseek函数调用流程图、Python代码示例
  • 游戏引擎学习第131天
  • 23种设计模式之《备忘录模式（Memento）》在c#中的应用及理解
  • Qt显示一个hello world
  • linux服务器更新jar包脚本
  • 工程化与框架系列（12）--响应式框架原理
  • 2024年12月中国电子学会青少年软件编程（Python）等级考试试卷（六级）答案 + 解析
  • 数据结构课程设计(java实现）---九宫格游戏,也称幻方
  • 热点创意大师智能体
  • 传奇3光通版手游行会战攻略：团队协作与战术布局详解
  • PS通道抠图
  • 河北廊坊seo网站建设网站优化/网站优化流程
  • wordpress分享小图片不/武汉网络seo公司
  • 做网站签订合同/谷歌浏览器下载安装
  • 平板购物网站建设/抖音seo点击软件排名
  • 网站怎么在百度搜到/注册网站免费注册
  • 网站编辑专题怎么做/百度推广价格