让阿里云OSS在不用后台代码实现动态上传文件

要使用阿里云OSS完成文件上传、添加和删除操作，且仅限于前端方法，您可以参考以下步骤和建议：

文件上传

1. 简单上传（适用于小文件，不超过5GB）:

   • 利用OSS Browser.js SDK进行简单上传。

   const client = new OSS({
    region: 'yourRegion',
    accessKeyId: 'yourAccessKeyId',
    accessKeySecret: 'yourAccessKeySecret',
    stsToken: 'yourSecurityToken', // 如有需要
    bucket: 'yourBucketName',
   });
   
   const file = document.getElementById('fileInput').files[0]; // 假设有一个<input type="file" id="fileInput">用于选择文件
   client.putObject('yourObjectName', file).then((result) => {
    console.log('Upload success:', result);
   }).catch((err) => {
    console.log('Upload error:', err);
   });
   

2. 分片上传（适用于大文件，大于5GB）:

   • OSS Browser.js SDK同样支持分片上传，它会自动处理大文件的分割与合并。

   const multipartUploadResult = await client.multipartUpload('yourObjectName', file);
   console.log('Multipart upload success:', multipartUploadResult);
   

3. 追加上传（针对特定场景，如视频流，不超过5GB）:

   • 仅当文件需要持续追加内容时使用。

   // 首次上传或追加内容
   await client.appendObject('yourAppendableObject', file, { position: 0 }); // position为追加的位置，首次可省略或设为0
   

文件管理

• 删除文件:
  • 删除已上传的文件，通过文件名指定。

  client.deleteObject('yourObjectName').then(() => {
  console.log('Delete success');
  }).catch((err) => {
  console.log('Delete error:', err);
  });
  

注意事项

• 权限控制：确保前端使用的访问凭证（AccessKey ID、AccessKey Secret等）具有足够的权限执行上述操作，同时考虑安全性，推荐使用STS临时凭证。
• 跨域设置：在OSS Bucket中配置CORS规则，允许前端域名进行跨域请求。
• 错误处理：上述代码示例中包含了基本的错误处理逻辑，实际应用中应根据需要细化异常处理机制。

以上操作均基于前端JavaScript实现，无需后端服务器介入。请确保遵循OSS的最佳实践，特别是在处理敏感数据和访问凭证时。