Vue实现OSS存储

Vue 文件上传至OSS (opens new window)

switch host

127.0.0.1 alphai-ota
::1 alphai-ota

阿里云OSS基本信息

Name	Value
env.ALIYUNCS_OOS_ACCESS_KEY_ID	xxx	Edit	Delete
env.ALIYUNCS_OOS_ACCESS_KEY_SECRET	xxx	Edit	Delete
env.ALIYUNCS_OOS_ENDPOINT	https://oss-cn-beijing.aliyuncs.com	Edit	Delete
env.ALIYUNCS_OOS_OTA_BUCKET	alphai-ota	Edit	Delete
env.ALIYUNCS_OOS_OTA_URL_EXPIRED	86400	Edit	Delete
env.ALIYUNCS_OOS_SECURITY_TOKEN	<empty>	Edit	Delete

步骤

在 Vue 3 中实现阿里云 OSS 存储上传文件的功能，你需要使用阿里云的 OSS JavaScript SDK，并在项目中进行配置。以下是一个简单的步骤：

1. 安装阿里云 OSS JavaScript SDK:

   npm install ali-oss
   

2. 配置阿里云 OSS 参数：

   在你的 Vue 3 项目中，创建一个文件（例如 ali-oss-config.js）用于配置阿里云 OSS 参数：

   // ali-oss-config.js
   import OSS from 'ali-oss'
   
   export const client = new OSS({
     region: 'oss-cn-beijing', // oss地址
     accessKeyId: 'xxx', // 通过阿里云控制台创建的AccessKey ID
     accessKeySecret: 'xxx', // 通过阿里云控制台创建的AccessKey Secret
     bucket: 'alphai-ota', // 仓库名字
     endpoint: 'https://oss-cn-beijing.aliyuncs.com', // 填写Bucket所在地域
     useFetch: true, // 支持上传大于100KB的文件
     secure: true // 返回的url为https
   })
   
   // 自定义头部信息
   export const headers = {
     // 指定Object的存储类型。
     // 'x-oss-storage-class': 'Standard',
     // 指定Object的访问权限。
     'x-oss-object-acl': 'public-read',
     // 指定PutObject操作时是否覆盖同名目标Object。
     // 此处设置为true，表示禁止覆盖同名Object。
     'x-oss-forbid-overwrite': 'false',
     'Access-Control-Allow-Origin': 'alphai-ota'
   }
   

   请替换 your-region、your-access-key-id、your-access-key-secret、your-bucket-name 和 your-endpoint 为你阿里云 OSS 的具体配置。

3. 创建上传文件的 Vue 组件：

   // 直接上传
   const { res } = await client.put(uploadPath, fileData, { headers })
   console.log('res', res)
   if (res.statusCode === 200) {
     ElMessage.success('上传成功')
     // 保存版本信息和版本描述给后端
     submitVersionInfo(id)
   }
   

   请将 your-upload-path 替换为你要上传到的路径。

4. 使用上传文件的组件：

   在你的页面或其他组件中使用上传文件的组件：

   <template>
     <div>
       <uploadFile />
     </div>
   </template>
   
   <script>
   import uploadFile from '@/components/uploadFile.vue';
   
   export default {
     components: {
       uploadFile,
     },
   };
   </script>
   

确保替换示例中的占位符为你具体的阿里云 OSS 配置信息。这个例子假设你已经在阿里云 OSS 上创建了一个 bucket。在实际应用中，你可能还需要考虑权限设置等安全因素。

问题

常见问题点 (opens new window)

网络超时处理 (opens new window)

分片上传 (opens new window)

• 自定义头部信息不需要"x-oss-storage-class": "Standard"
• 跨域配置
  • 来源 ：http://alphai-ota
  • 允许 Headers ：*
  • 暴露 Headers：ETag、x-oss-request-id、x-oss-version-id

// 自定义头部信息
export const headers = {
  // 指定该Object被下载时的网页缓存行为。
  'Cache-Control': 'no-cache',
  // 指定该Object被下载时的名称。
  //"Content-Disposition": "example.txt",
  // 指定该Object被下载时的内容编码格式。
  'Content-Encoding': 'utf-8',
  // 指定过期时间，单位为毫秒。
  //Expires: "1000",
  'Access-Control-Allow-Origin': '*',
  // 指定Object的存储类型。
  //"x-oss-storage-class": "Standard",
  // 指定Object标签，可同时设置多个标签。
  'x-oss-tagging': 'Tag1=1&Tag2=2',
  // 指定初始化分片上传时是否覆盖同名Object。此处设置为true，表示禁止覆盖同名Object。
  'x-oss-forbid-overwrite': 'false',
  'Content-Type': 'application/x-www-form-urlencoded',
  'Access-Control-Allow-Origin': 'alphai-ota'
}

// 分片上传
const { res } = await client.multipartUpload(uploadPath, fileData, {
  headers,
  progress: (p, cpt) => {
    // 为中断点赋值。
    console.log(cpt)
    // 获取上传进度。
    console.log(p)
  }
})
console.log('res', res)
if (res.statusCode === 200) {
  ElMessage.success('上传成功')
  // 保存版本信息和版本描述给后端
  submitVersionInfo(id)
}

client.list()

获取所有OSS存储数据，目前限制1000条一下

client.get()

获取该文件的具体信息：client.get('AIBOX/APK/AIBOX_M-1.0.19.apk')

client.head()

获取该文件的元数据信息：client.head('AIBOX/APK/AIBOX_M-1.0.19.apk')

client.copy()

• 拷贝文件地址：copyPath
• 源文件地址：sourcePath
• 请求头：headers

拷贝OSS文件数据：client.copy(copyPath,sourcePath,{ headers })

client.multipartUploadCopy()

对于大于1 GB文件，您可以使用multipartUploadCopy方法进行分片拷贝