JavaScript实战 - 使用JavaScript上传文件到阿里云OSS

关注

原创最新推荐文章于 2026-08-24 11:20:00 发布 2.4k 阅读 AI 写同款· GEO 优化 ›

oss 阿里云 javascript 上传图片多余的就不说了直接上干货第一步. 引入官方提供的js库复制：第二步.声明自己的 accessKeyId 和 accessKeySecret 这个需要到阿里云里面去设置 region：阿里云服务器地址 accessKeyId：您的key accessKeySecret：您的密码， bucket：阅读详情

作者：逍遥Sean
简介：一个主修Java的Web网站\游戏服务器后端开发者
主页：https://blog.csdn.net/Ureliable
觉得博主文章不错的话，可以三连支持一下~ 如有疑问和建议，请私信或评论留言！

使用JavaScript上传文件到阿里云OSS

- - 结语

1. 引言

阿里云对象存储（OSS）是阿里云提供的高可用、高扩展性的对象存储服务，适用于存储大量非结构化数据，如图片、视频、文档等。本文将介绍如何使用JavaScript和阿里云的OSS JavaScript SDK实现文件上传到阿里云OSS的过程。

2. 准备工作

在开始之前，确保完成以下准备工作：

注册阿里云账号并开通OSS服务。
创建一个OSS存储空间（Bucket）。
获取Access Key ID和Access Key Secret，用于SDK的认证。

3. 使用阿里云OSS JavaScript SDK上传文件

3.1. 引入阿里云OSS JavaScript SDK

首先，通过CDN或npm安装阿里云OSS JavaScript SDK，并引入到你的项目中。

<!-- 使用CDN引入 -->
<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>

或者，如果你使用npm管理项目：

npm install ali-oss

然后在你的JavaScript文件中引入：

const OSS = require('ali-oss');
// 或者使用CDN引入时无需require，直接使用全局的OSS对象

3.2. 配置OSS客户端

创建一个OSS客户端实例，并配置相关参数：

const client = new OSS({
  accessKeyId: 'your_access_key_id',
  accessKeySecret: 'your_access_key_secret',
  region: 'your_bucket_region', // oss地域，如oss-cn-hangzhou
  bucket: 'your_bucket_name'    // 要上传的bucket名称
});

3.3. 文件上传函数

编写一个文件上传的函数，用于处理文件选择和上传操作：

function uploadFile(file) {
  const fileName = file.name;
  // 生成唯一文件名，可根据需求自定义
  const uniqueFileName = `${Date.now()}-${fileName}`;
  
  // 调用OSS SDK上传文件
  return client.put(uniqueFileName, file)
    .then(result => {
      console.log('文件上传成功:', result);
      return result;
    })
    .catch(err => {
      console.error('文件上传失败:', err);
      throw err;
    });
}

// 示例：将处理函数绑定到文件选择输入
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(event) {
  const file = event.target.files[0];
  if (file) {
    uploadFile(file);
  }
});