如何将Cloudinary上传的Vue Options API代码转为Composition API

以下是转换后的完整代码，基于Vue 3 Composition API（setup语法糖）实现：

<template>
  <div class="cl-upload">
    <h2>上传图片至Cloudinary</h2>
    <div v-show="showProgress">
      <progress-bar :options="options" :value="progress" />
    </div>

    <form v-on:submit.prevent="upload">
      <label for="cloudname-input">Cloud Name:</label>
      <input id="cloudname-input" v-model="cloudName" placeholder="从控制台输入cloud_name" />
      
      <label for="preset-input">上传预设:</label>
      <input id="preset-input" v-model="preset" placeholder="从上传设置输入预设名称" />
      
      <label for="file-input">选择图片:</label>
      <input
        id="file-input"
        type="file"
        accept="image/png, image/jpeg"
        @change="handleFileChange($event)"
      />
      
      <button type="submit" :disabled="filesSelected < 1">上传</button>
    </form>

    <!-- 显示上传成功的图片 -->
    <section v-if="results && results.secure_url">
      <img :src="results.secure_url" :alt="results.public_id" />
    </section>

    <!-- 显示错误信息 -->
    <section>
      <ul v-if="errors.length > 0">
        <li v-for="(error,index) in errors" :key="index">{{error}}</li>
      </ul>
    </section>
  </div>
</template>

<script setup>
import axios from "axios";
import ProgressBar from "vuejs-progress-bar";
import { ref } from 'vue';

// 进度条配置
const progressBarOptions = {
  text: {
    shadowColor: "black",
    fontSize: 14,
    fontFamily: "Helvetica",
    dynamicPosition: true
  },
  progress: {
    color: "#E8C401",
    backgroundColor: "#000000"
  },
  layout: {
    height: 35,
    width: 140,
    type: "line",
    progressPadding: 0,
    verticalTextAlign: 63
  }
};

// 响应式状态
const results = ref(null);
const errors = ref([]);
const file = ref(null);
const filesSelected = ref(0);
const cloudName = ref("");
const preset = ref("");
const tags = ref("browser-upload");
const progress = ref(0);
const showProgress = ref(false);
const options = ref(progressBarOptions);
const fileContents = ref(null);
const formData = ref(null);

// 处理文件选择事件
const handleFileChange = (event) => {
  console.log("handlefilechange", event.target.files);
  file.value = event.target.files[0];
  filesSelected.value = event.target.files.length;
};

// 构造上传表单数据
const prepareFormData = () => {
  formData.value = new FormData();
  formData.value.append("upload_preset", preset.value);
  formData.value.append("tags", tags.value); // 可选：给图片添加标签，方便Cloudinary后台管理
  formData.value.append("file", fileContents.value);
};

// 核心上传函数
const upload = () => {
  // 校验必填参数
  if (!preset.value || !cloudName.value) {
    errors.value.push("必须输入Cloud Name和上传预设才能上传");
    return;
  }
  // 清空之前的错误信息
  errors.value = [];

  console.log("upload", file.value.name);

  const reader = new FileReader();
  reader.addEventListener(
    "load",
    () => {
      fileContents.value = reader.result;
      prepareFormData();
      // 拼接Cloudinary上传接口地址
      const cloudinaryUploadURL = `https://api.cloudinary.com/v1_1/${cloudName.value}/upload`;
      const requestObj = {
        url: cloudinaryUploadURL,
        method: "POST",
        data: formData.value,
        // 实时监听上传进度
        onUploadProgress: (progressEvent) => {
          console.log("progress", progressEvent);
          progress.value = Math.round(
            (progressEvent.loaded * 100.0) / progressEvent.total
          );
          console.log(progress.value);
        }
      };
      // 显示进度条
      showProgress.value = true;
      // 发起上传请求
      axios(requestObj)
        .then(response => {
          results.value = response.data;
          console.log(results.value);
          console.log("public_id", results.value.public_id);
          // 上传成功后，可通过results.value.secure_url获取图片的HTTPS地址，用于后续业务逻辑
        })
        .catch(error => {
          errors.value.push(error.message || "上传失败，请检查参数或网络");
          console.log(error);
        })
        .finally(() => {
          // 上传完成后1秒隐藏进度条
          setTimeout(() => {
            showProgress.value = false;
          }, 1000);
        });
    },
    false
  );

  // 读取选中的文件
  if (file.value && file.value.name) {
    reader.readAsDataURL(file.value);
  }
};
</script>

使用说明 #

1. 配置Cloudinary参数

   • 在Cloudinary控制台获取你的Cloud Name，填入对应输入框
   • 在Cloudinary上传设置中创建未签名上传预设（需开启「允许未签名上传」），填入预设输入框

2. 上传流程

   • 点击「选择图片」按钮，选择本地PNG/JPG格式的图片
   • 点击「上传」按钮，等待进度条完成
   • 上传成功后，页面会展示上传的图片，同时results.value中包含完整的返回数据

3. 获取图片URL
   上传成功后，results.value.secure_url即为图片的HTTPS访问地址，你可以直接将该URL用于页面展示，或者发送到后端存储。

注意事项 #

• 确保上传预设配置为允许未签名上传，否则会返回权限错误
• 仅支持PNG/JPG格式图片，如需支持其他格式可修改accept属性值
• 网络异常或参数错误时，错误信息会显示在页面底部

内容的提问来源于stack exchange，提问作者belay sirak