如何上传文件cloddinary - Javascript

Cloudinary是一个云媒体管理服务，允许您上传、存储、管理和交付用于Web和移动应用程序的图像和视频。它提供多个API，其中包括JavaScript API，可以让您在前端应用中上传和管理媒体文件。本文将介绍如何使用JavaScript API上传文件到Cloudinary。

步骤

1. 创建Cloudinary账号

要使用Cloudinary，您需要创建一个账号。在注册后，您将在“控制台”中找到您的cloud name和API密钥。

2. 安装并导入Cloudinary

首先，您需要安装Cloudinary库。您可以使用npm包管理器在终端中运行以下命令：

npm install cloudinary --save

然后您需要导入Cloudinary模块：

import cloudinary from 'cloudinary';

3. 配置Cloudinary

完成导入后，您需要进行一些初始化设置。在使用Cloudinary API之前，您需要通过向Cloudinary传递配置对象来配置它。您可以在控制台中找到您的Cloudinary Cloud名称和API密钥。此外，您还需要指定您的上传目标，即我们将向其中上传文件的文件夹（这在控制台中称为“文件夹”）。

cloudinary.config({
  cloud_name: 'your_cloud_name',
  api_key: 'your_api_key',
  upload_preset: 'your_preset',
  folder: 'your_folder' // 您自己的上传目录，不是必需的
});

重要提示：upload_preset可以在“控制台” > “设置” > “上传”中找到。如果未设置上传预设，则在上传时使用安全签名。

4. 创建上传组件

然后，您需要创建一个上传组件。您可以使用HTML表单元素，如：

<form>
  <input type="file" name="file" id="file">
  <button type="submit">上传文件</button>
</form>

您还需要为表单添加提交事件监听器以处理文件上传：

document.querySelector('form').addEventListener('submit', async (e) => {
  e.preventDefault();
  const file = document.getElementById('file').files[0];
  try {
    // 处理上传文件
  } catch (error) {
    console.error(error);
  }
});

5. 上传文件

最后，您需要使用Cloudinary API将文件上传到您的云中，并从API中获得上传的公共URL。这需要您使用cloudinary.v2.uploader.upload()方法。

document.querySelector('form').addEventListener('submit', async (e) => {
  e.preventDefault();
  const file = document.getElementById('file').files[0];
  try {
    const result = await cloudinary.v2.uploader.upload(file, {
      public_id: file.name.split('.').slice(0, -1).join('.')
    });
    console.log(result.secure_url); // https://res.cloudinary.com/<your_cloud_name>/image/upload/<version>/<public_id>.<format>
  } catch (error) {
    console.error(error);
  }
});

在上传的过程中，您能够添加其他邮递选项以进行图片编辑，譬如图片尺寸，需要裁剪和旋转的方式。

完整代码片段

import cloudinary from 'cloudinary';

cloudinary.config({
  cloud_name: 'your_cloud_name',
  api_key: 'your_api_key',
  upload_preset: 'your_preset',
  folder: 'your_folder' // 您自己的上传目录，不是必需的
});

document.querySelector('form').addEventListener('submit', async (e) => {
  e.preventDefault();
  const file = document.getElementById('file').files[0];
  try {
    const result = await cloudinary.v2.uploader.upload(file, {
      public_id: file.name.split('.').slice(0, -1).join('.')
    });
    console.log(result.secure_url); // https://res.cloudinary.com/<your_cloud_name>/image/upload/<version>/<public_id>.<format>
  } catch (error) {
    console.error(error);
  }
});

结论

Cloudinary为您的前端应用程序提供了一个很棒的选项来管理您的媒体文件。我们希望这篇文章能够帮助您开始在Cloudinary上传文件。