阿里云 OSS，带你解锁上传文件的正确姿势！

前端

2023-10-09 10:07:00

在 Uniapp 中畅享纯前端上传的魅力，无惧跨端与后端！

什么是拦住了你？

在构建 Uniapp 应用时，文件上传往往面临着后端开发经验不足、后端稳定性担忧和跨端支持的需求。

来体验纯前端上传的魅力！

现在，你可以挥洒前端才华，将文件轻松上传到阿里云 OSS，无需后端支持，稳定可靠，跨端通用！

一次开发，三端通用！

H5、小程序、App 一次开发，代码即可复用，多端运行，兼容性强，跨平台、跨系统，轻松实现文件上传！

视频、音频，轻松上传！

无论是震撼的视频，还是悦耳的音乐，都可以轻松上传到阿里云 OSS，为你的应用增添多媒体元素！

文档上传，信手拈来！

Word、Excel、PPT、PDF等办公文档统统不是问题，统统一键上传，让你的应用轻松处理各种文件！

图片上传，随心所欲！

各种格式的图片，包括 JPG、PNG、GIF 等，都能轻松上传，让你的应用视觉效果更出彩！

轻松跨端，无忧上传！

无论你是使用 H5、小程序还是 App，都可以轻松实现文件上传，让你的应用在不同平台上都能发挥出色！

还等什么，立刻行动！

步骤：

登录【阿里云控制台】创建阿里云OSS存储空间
选择【基本信息】-【访问域名】查看外网访问域名
配置Bucket策略
引入阿里云SDK进行上传

配置 Bucket 策略示例代码：

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Action": ["s3:GetObject", "s3:PutObject", "s3:DeleteObject"],
      "Effect": "Allow",
      "Principal": "*",
      "Resource": [
        "arn:aws:s3:::bucket_name/*"
      ]
    }
  ]
}

引入阿里云 SDK 进行上传示例代码：

uni.request({
  url: 'https://your-endpoint.aliyuncs.com',
  method: 'POST',
  header: {
    'Content-Type': 'application/json',
    'x-oss-security-token': '',
  },
  data: {
    'OSSAccessKeyId': '',
    'policy': '',
    'signature': '',
    'key': '',
    'success_action_status': 200,
    'file': '',
  },
  success: (res) => {
    console.log(res.data);
  },
});