前端实现上传图片到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' 的声明文件”的错误，通常是由于该模块没有提供类型定义文件
https://i-blog.csdnimg.cn/direct/c107190a7c7e4677b65f0ae88498a05a.png
办理方法:
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里面谁人删除即可,不需要,也无法使用
https://i-blog.csdnimg.cn/direct/5fd0cd1fb41642bdb46b0a3c7cdfe43d.png
[*]在对象的外面定义:
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 中。
https://i-blog.csdnimg.cn/direct/f208736c6ccc4bc5a465ffea59b64e65.png
可以在创建 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> 上传大概出现的问题:
https://i-blog.csdnimg.cn/direct/712bf4ef73d04160af5877deef8bf7ea.png
[*]如果跨域,这个时候要去服务器配置允许访问的IP地址,防止出现跨域报错,这个是需要去官网到自己的服务器去配置的
https://i-blog.csdnimg.cn/direct/413bcce1456a4a1d910feb71b449210c.png
关键点总结:
[*]获取服务器相关配置信息
[*]安装OSS
[*]使用自带的put方法上传图片
const result = await client.put(filePath, file);
[*]图片路径就是仓库路径拼接的，使用put方法上传会自动到谁人仓库路径下去存
[*]服务器需要配置跨域
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]