vue3+ant design vue实现文件上传（阿里云oss）~

1、效果图

2、自定义上传

<a-upload
v-model:file-list="fileList"
name="导入员工"
action=""
:customRequest="upDown"
:beforeUpload="beforeUpload"
:onChange="handleChange"
@remove="removeFile"
accept=".xlsx,.xls"
>
  <a-button class="btn btn_width" type="primary"> 上传Excel </a-button>
</a-upload>

import {
    queryAutograph,
    uploadOss,
  } from '@/api/import';
// 存储文件
  const fileList = ref<any[]>([]);
  // 导入文件
  const upDown = async (file) => {
    const random = Math.random();
    const fileName = `${random}${file.file.name}`;
    //获取oss签名
    queryAutograph({}).then(async (res) => {
//根据后端上传接口按需解构（这里是oss上传）
      const { host, dir, OSSAccessKeyId, success_action_status, Signature, policy } = res;
      const address = dir + fileName;
      const url = host;
      const formData = new FormData();
      formData.append('key', address);
      formData.append('OSSAccessKeyId', OSSAccessKeyId);
      formData.append('Signature', Signature);
      formData.append('policy', policy);
      formData.append('success_action_status', success_action_status);
      formData.append('file', file.file);//这里必须放在最后，上面的顺序不限制
      // 上传OSS
      try {
        await uploadOss({ url, formData });
      } catch (e) {
        message.error('上传失败');
        return;
      }
        //拼接文件地址，用来传递给后端接口
      downloadUrl.value = host + '/' + address;
      let list: any = [];
      list.push({ name: file.file.name, url: downloadUrl });
      // fileList.value = list.flatMap((item) => item.url);
      fileList.value = list;
    });
  };

// 删除文件
  const removeFile = (file) => {
    const index = fileList.value.indexOf(file.file);
    const newFileList = fileList.value.slice();
    newFileList.splice(index, 1);
    fileList.value = newFileList;
    console.log('删除成功：', fileList.value);
  };
// 文件上传测试
  import { message } from 'ant-design-vue';
  // 检查文件类型，如果文件类型正确，则继续上传,false指停止上传，true指继续上传，file是文件
  const beforeUpload = (file) => {
    // // 检查文件类型是否为Excel
    const isExcel =
      file.type === 'application/vnd.ms-excel' ||
      file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
    if (!isExcel) {
      message.error('只能上传Excel文件！');
      return false;
    }
    return true;
  };

import { request } from '@/utils/request';
const VUE_APP_OSS_API = process.env.VUE_APP_OSS_API;
const VUE_APP_VOICE_API = process.env.VUE_APP_VOICE_API;

// OSS上传签名
export function queryAutograph(params) {
  return request({
    url: `${VUE_APP_VOICE_API}/oss/getSign`,
    method: 'get',
    params,
  });
}
// 上传OSS 请求
export const uploadOss = ({ url, formData }) => {
  const pro = process.env.NODE_ENV === 'development' ? VUE_APP_OSS_API : url;
  return request({
    url: pro,
    method: 'post',
    data: formData,
    headers: { 'Content-Type': 'multipart/form-data' },
  });
};

 3、思路：做文件上传时，一般使用自定义上传行为，用来覆盖默认行为，首先创建new FormData();及相关上传参数，并调用oss签名接口，拿到返回的host值之后拼接文件地址便于后面调用添加接口上送。（注意：这里使用的阿里云oss上传时，若遇到404情况，可考虑不使用代理，直接直传）

4、若不使用阿里云oss做文件上传时，可不需获取签名，创建完new FormData();及相关参数之后，直接调用后端上传接口即可。

// 存储文件
  const fileList = ref<any[]>([]);
  // 导入文件
  const upDown = async (file) => {
    fileList.value = [];
    fileList.value.push(file.file);
    const formData = new FormData();
    formData.append('file', fileList.value[0]);
    await importData(formData)
      .then((res) => {
        message.info('文件上传成功');
        // downloadUrl.value = `${platformApi}/dataCockpit/out/common/get-sheet-from-excel`;
        console.log('导入成功：', res);
        console.log('文件列表：', fileList.value);
      })
      .catch((err) => {
        message.error(err);
      });
}