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

首先，下面这些信息从阿里云服务器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,         // 指定操作的Bucketsecure: 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,         // 指定操作的Bucketsecure: 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方法上传会自动到那个仓库路径下去存 
  • 服务器需要配置跨域

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/72504.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

huggingface NLP主要知识点以及超级详解使用

huggingface NLP主要知识点以及超级详解使用

1.安装huggingface依赖库 pip install transformers pip install datasets pip install pytorch pip install tokenizers pip install diffusers pip install accelerate pip install evaluate pip install optimum pip install pillow pip install requests pip install gr…
阅读更多...
Spark核心之02：常用算子详解

Spark核心之02：常用算子详解

1、RDD操作详解 # 启动spark-shell spark-shell --master local[2] 1.1 基本转换 1) map map是对RDD中的每个元素都执行一个指定的函数来产生一个新的RDD。 任何原RDD中的元素在新RDD中都有且只有一个元素与之对应。 举例&#xff1a; scala> val a sc.parallelize(1 …
阅读更多...
MySQL 8.X 报错处理

MySQL 8.X 报错处理

1.重新加载配置 reload the configuration mysql> ALTER INSTANCE RELOAD KEYRING; ERROR 1227 (42000): Access denied; you need (at least one of) the ENCRYPTION_KEY_ADMIN privilege(s) for this operation 提示需要ENCRYPTION_KEY_ADMIN权限 重新授权 GRANT ENCR…
阅读更多...
SQL注入练习场：PHPStudy+SQLI-LABS靶场搭建教程（零基础友好版）

SQL注入练习场：PHPStudy+SQLI-LABS靶场搭建教程（零基础友好版）

注意&#xff1a;文中涉及演示均为模拟测试&#xff0c;切勿用于真实环境&#xff0c;任何未授权测试都是违法行为&#xff01; 一、环境准备 下载PHPStudy 官网下载地址&#xff1a;https://www.xp.cn/php-study&#xff08;选择Windows版&#xff09; 安装时建议选择自定…
阅读更多...
现今大语言模型性能（准确率）比较

现今大语言模型性能（准确率）比较

现今大语言模型性能（准确率）比较 表头信息：表的标题为“大语言模型性能比较结果”（英文：Table 1: Large Language Model Performance Comparison Results），表明该表是用于对比不同大语言模型的性能。列信息： 模型：列出参与比较的不同大语言模型名称，包括LLAMA3（70B）…
阅读更多...
Docker创建自定义网桥并指定网段

Docker创建自定义网桥并指定网段

前言 docker0是Docker默认网络的核心组件, 通过虚拟网桥和NAT技术, 实现了容器间的通信以及容器与外部网络的交互。然而, docker0网段是固定的(通常是172.17.0.0/16), 为了更灵活地管理容器网络&#xff0c;Docker支持创建自定义网桥&#xff0c;允许用户指定网段。 例如, 在…
阅读更多...
【向量数据库Weaviate】 和Elasticsearch的区别

【向量数据库Weaviate】 和Elasticsearch的区别

Weaviate 和 Elasticsearch 是两种不同类型的数据库&#xff0c;设计目标和应用场景有显著差异。以下是它们的核心区别和适用场景的详细对比&#xff1a; 1. 设计目标与核心能力 维度WeaviateElasticsearch核心能力向量数据库 图数据库&#xff08;语义搜索优先&#xff09;全…
阅读更多...
蓝桥杯每日一题：第一周周四哞叫时间

蓝桥杯每日一题：第一周周四哞叫时间

蓝桥杯每日一题&#xff1a;第一周周四哞叫时间 疑惑&#xff1a;如何把复杂度控制在Q&#xff08;n&#xff09;&#xff0c;怎么枚举a和b&#xff0c;longlong的形式又该怎么输入&#xff08;考虑用string&#xff09; 思路&#xff1a;枚举倒数第二个b前面有多少个a 这是一…
阅读更多...
在 macOS 使用 .pem 私钥免密登录腾讯云服务器

在 macOS 使用 .pem 私钥免密登录腾讯云服务器

前言 在腾讯云上创建服务器时&#xff0c;如果选择了「密钥对」的登录方式&#xff0c;就会得到一个 .pem 文件作为私钥。很多小伙伴在使用 macOS 系统时&#xff0c;可能不清楚如何使用这个私钥文件来 SSH 免密登录远程服务器。本文将详细介绍如何在本地配置 .pem 私钥文件并…
阅读更多...
AI学习笔记：LM studio大模型加载参数说明

AI学习笔记：LM studio大模型加载参数说明

LM Studio加载大模型时参数设置页面的常见参数及设置方法如下&#xff1a; 上下文长度&#xff08;Context Length&#xff09; 意义&#xff1a;表示模型可以处理的最大上下文长度&#xff0c;即模型一次能够考虑的输入文本的最大token数量。较大的上下文长度能让模型更好地…
阅读更多...
Spring项目中常用操作记录

Spring项目中常用操作记录

List 基础操作 创建 // 使用 ArrayList&#xff08;基于动态数组&#xff0c;适合随机访问&#xff09; List<String> arrayList new ArrayList<>();// 使用 LinkedList&#xff08;基于链表&#xff0c;适合频繁插入/删除&#xff09; List<Integer> li…
阅读更多...
腾讯 TDF 即将开源 Kuikly 跨端框架，Kotlin 支持全平台

腾讯 TDF 即将开源 Kuikly 跨端框架，Kotlin 支持全平台

今天&#xff0c;在腾讯的 Shiply 平台看 Flutter 动态化自研框架 Conch 时&#xff0c;在侧边栏看到了有「跨端开发框架」的介绍&#xff0c;点开发现有两个产品&#xff1a; Hippy&#xff1a;面向前端技术栈的跨端开发框架&#xff0c;Web原生开发体验&#xff0c;支持 Rea…
阅读更多...
SQL AND OR 操作符详解

SQL AND OR 操作符详解

SQL AND & OR 操作符详解 在SQL（结构化查询语言）中，AND 和 OR 是两种非常重要的逻辑操作符，它们用于在查询条件中组合多个条件。理解并正确使用这些操作符对于编写有效的SQL查询至关重要。 引言 在处理数据库查询时，我们常常需要根据多个条件来筛选数据。AND 和 OR…
阅读更多...
nginx accesslog 打印自定义header

nginx accesslog 打印自定义header

比如我在请求的header中添加了一个path-match-type&#xff0c;那我现在nginx的accesslog 中打印出来&#xff0c;应该如何配置呢&#xff1f; rootnginx-59f5d66df6-jw5k8:/# cat /etc/nginx/nginx.conf user nginx; worker_processes auto;error_log /var/log/nginx/erro…
阅读更多...
响应式布局的设计规范

响应式布局的设计规范

响应式设计&#xff08;Responsive Design&#xff09; 是一种 web 设计技术&#xff0c;旨在使网页在不同的设备和屏幕尺寸上都有良好的显示效果。响应式设计的核心思想是网页的布局能够根据设备的屏幕宽度、分辨率以及其他特性自动调整&#xff0c;使其适应桌面、平板和手机等…
阅读更多...
说一下redis事务底层原理

说一下redis事务底层原理

Redis事务 1. 事务的基本流程 Redis 事务通过 MULTI、EXEC、WATCH 等命令实现&#xff0c;底层原理可以分为以下几个步骤&#xff1a; (1) MULTI 命令 当客户端发送 MULTI 命令时&#xff0c;Redis 会将客户端标记为“事务模式”。在事务模式下&#xff0c;客户端发送的所有…
阅读更多...
【我的Android进阶之旅】如何使用NanoHttpd在Android端快速部署一个HTTP服务器？

【我的Android进阶之旅】如何使用NanoHttpd在Android端快速部署一个HTTP服务器？

文章目录 开篇：程序员的"摸鱼神器"？一、为什么选择NanoHttpd？二、五分钟极速上车指南2.1 ▶ 第一步：引入依赖的哲学2.2 ▶ 第二步：创建服务器类：继承大法好2.3 ▶ 第三步：启动服务的仪式感三、高级玩法：让服务器不再单调3.1 🔥 场景1：变身文件服务器3.2 �…
阅读更多...
播放器系列3——解码

播放器系列3——解码

FFmpeg解码过程详解 解码流程 #mermaid-svg-FGu92IEtteOdO2tO {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-FGu92IEtteOdO2tO .error-icon{fill:#552222;}#mermaid-svg-FGu92IEtteOdO2tO .error-text{fill:#5522…
阅读更多...
SimPO算法-Simple Preference Optimizationwith a Reference-Free Reward

SimPO算法-Simple Preference Optimizationwith a Reference-Free Reward

偏好优化&#xff08;preference optimization &#xff09;算法大全&#xff1a; 本篇介绍下SimPO SimPO&#xff08;Simple Preference Optimization&#xff09;的设计核心在于简化偏好优化过程&#xff0c;同时提升模型的表现。其设计主要围绕两个关键点展开&#xff1a;长…
阅读更多...
AIGC时代：如何快速搞定Spring Boot+Vue全栈开发

AIGC时代：如何快速搞定Spring Boot+Vue全栈开发

文章目录 一、Spring Boot基础二、Vue.js基础三、Spring Boot与Vue.js集成四、性能优化与最佳实践《快速搞定Spring BootVue全栈开发》 内容简介作者简介目录前言/序言本书内容本书特点读者对象 随着人工智能生成内容&#xff08;AIGC&#xff09;技术的迅速发展&#xff0c;…
阅读更多...
最新文章

Copyright @ 2022~2023