广州阿里云代理商：阿里云oss js上传文件

luotuoemo • 2024年2月29日 06:24 • 阿里云 • 阅读 101

阿里云OSS提供了丰富的上传方式，其中包括JS上传方式。下面是一个上传文件的示例代码：

// 导入阿里云OSS的SDK
import OSS from 'ali-oss';

// 建立OSS客户端实例
const client = new OSS({
  region: '<your region>',
  accessKeyId: '<your accessKeyId>',
  accessKeySecret: '<your accessKeySecret>',
  bucket: '<your bucket name>',
});

// 选择要上传的文件
const file = document.querySelector('#file-input').files[0];

// 生成上传用的时间戳
const timestamp = +new Date();

// 生成上传用的文件名
const filename = `${timestamp}-${file.name}`;

// 上传文件
client.put(filename, file).then((result) => {
  console.log('上传成功', result);
}).catch((err) => {
  console.error('上传失败', err);
});

解释一下上述代码：

先导入阿里云OSS的SDK库。
建立OSS客户端实例，需要传入阿里云的一些认证参数，比如region、accessKeyId、accessKeySecret、bucket等参数，可从阿里云控制台获取。
选择要上传的文件，这里使用HTML5的File API获取文件对象。
生成上传用的时间戳和文件名，根据需要生成即可。
调用OSS客户端实例的put方法上传文件，参数是上传的文件名和文件对象。
put方法返回的是一个Promise对象，通过then方法获取成功的回调，catch方法获取失败的回调。

注意：上传文件需要在serverless.yml文件中配置权限，同时需要在前端index.html文件中引入阿里云OSS的SDK库。

阿里云的OSS（Object Storage Service）是一种分布式、高可用性、高扩展性的对象存储服务。在前端页面中使用阿里云oss js上传文件可以极大地提高用户体验，同时也可以减轻服务器的负担。下面是示例代码：

引入阿里云 OSS js SDK：

<script src="//gosspublic.alicdn.com/aliyun-oss-sdk-6.0.0.min.js"></script>

创建OSS客户端：

var client = new OSS({
  region: 'oss-cn-hangzhou',
  accessKeyId: 'yourAccessKeyId',
  accessKeySecret: 'yourAccessKeySecret',
  bucket: 'yourBucketName'
});

获取上传文件：

var file = document.getElementById('file').files[0];

上传文件：

client.put('objectName', file).then(function (result) {
  console.log('文件上传成功：' + result.url);
}).catch(function (err) {
  console.error('文件上传失败：' + err);
});

其中，’objectName’表示上传后的文件名，file为文件对象。上传成功后会返回文件的访问URL。

需要注意的是，为了保证上传文件的安全性，建议将上传接口开启跨域访问控制，只允许指定的域名访问。也可以在阿里云OSS控制台设置上传策略，限制上传的文件类型、大小等。