玩转纯前端又拍云文件上传，打造你的专属存储王国🚀

2023-12-19 10:14:10

纯前端实现又拍云文件上传：释放你的创造力

获取上传凭证

获取上传凭证是第一步。你需要访问又拍云官网，登录你的账户。然后导航到「存储」-「空间管理」。选择要上传文件的空间，点击「操作」-「访问控制」获取你的 AccessKey 和 SecretKey。接下来，在「存储策略」中查找要上传文件的策略，并复制它的 Policy。

构建表单

下一步是构建一个表单。你可以使用 HTML 创建一个基本的表单，然后使用 JavaScript 动态添加隐藏域和文件域。以下是代码示例：

<form id="upload-form" method="post" action="https://v0.api.upyun.com/form-api/upload">
  <input type="hidden" name="bucket" value="your-bucket-name">
  <input type="hidden" name="accesskey" value="your-access-key">
  <input type="hidden" name="policy" value="your-policy">
  <input type="hidden" name="signature" value="your-signature">
  <input type="file" name="file">
  <input type="submit" value="上传">
</form>

提交表单

最后一步是提交表单。只需使用 JavaScript 触发 submit() 方法即可。

document.getElementById('upload-form').submit();

踩坑指南

CORS 问题

跨域问题可能会阻止你上传文件。要解决这个问题，请确保在又拍云空间设置中将允许跨域的域名添加到白名单中。

文件大小限制

又拍云对文件大小有限制，默认情况下为 100MB。如果要上传更大的文件，需要在空间设置中修改文件大小限制。

文件类型限制

又拍云还对文件类型有限制。默认情况下，只允许上传图片、音频和视频文件。如果要上传其他类型文件，需要在空间设置中修改文件类型限制。

使用示例

以下是完整的又拍云文件上传示例：

// 获取上传凭证
const accessKey = 'your-access-key';
const secretKey = 'your-secret-key';
const bucketName = 'your-bucket-name';
const policy = 'your-policy';

// 构建表单
const form = document.getElementById('upload-form');
const hiddenInputs = [
  { name: 'bucket', value: bucketName },
  { name: 'accesskey', value: accessKey },
  { name: 'policy', value: policy },
  { name: 'signature', value: your-signature },
];

hiddenInputs.forEach(input => {
  const newInput = document.createElement('input');
  newInput.type = 'hidden';
  newInput.name = input.name;
  newInput.value = input.value;
  form.appendChild(newInput);
});

// 监听表单提交事件
form.addEventListener('submit', (event) => {
  event.preventDefault();
  form.submit();
});