直接看代码

上传组件

html
      <el-upload
        action="https://up-z0.qiniup.com"
        :data="fileData"
        v-model="fileList"
        class="upload-demo"
        drag
        :before-upload="selectNewFile"
        multiple
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          拖拽文件到此处，或 <em>点击</em> 开始上传文件
        </div>
        <template #tip>
          <div class="el-upload__tip">
            jpg/png files with a size less than 500kb
          </div>
        </template>
      </el-upload>

ts代码

ts

import { UploadFilled } from "@element-plus/icons-vue";
import type { UploadUserFile, UploadRawFile } from "element-plus";

const fileData = ref<any>({});

const fileList = ref<UploadUserFile[]>([]);
const selectNewFile = async (rawFile: UploadRawFile) => {
  console.log(rawFile);
  // 调用自己的后端，获取七牛云token
  const res = await doApi.get<{ token: string }>("file/getUploadToken");
  console.log(res);
  if (res.c == 200) {
    // 封装七牛云特殊字段参数
    fileData.value = {
      token: res.d?.token,
    };
    console.log(fileData.value);
    return true;
  }
  return false;
};

易错点

fileData 是封装七牛云特定参数使用的变量，但注意，改变其值时，要使用 .value 完全重置其内容，否则调用七牛云接口时，使用的时默认变量值，很怪很奇葩，垃圾 Element ！。