在vue3项目中使用简单的上传文件及下载功能

// 上传资料操作
const fileInput = ref(null);
const fileId = ref(null);

// 上传文件类型
const fileType = ref(null);

// 上传文件按钮点击事件
const handleUploadClick = (val, type) => {
if (fileInput.value) {
fileType.value = type;
fileId.value = val.id;
fileInput.value.click(); // 打开文件选择框
}
};

// 文件选择变化事件
const onFileChange = async (event) => {
const file = event.target.files[0];
if (!file) return;

const formData = new FormData();
formData.append('file', file);

try {
  // 上传文件
  const uploadRes = await upload(formData);

  // 构建调查信息列表
  await buildSurveyInfoListUpload({
    fileId: uploadRes.id,
    id: fileId.value
  });

  // 提示上传成功
  ElMessage({
    message: '上传成功',
    type: 'success',
    plain: true
  });

  // 获取列表数据
  const listRes = await getList({
    buildSurveyId: route.query.id,
    type: fileType.value
  });
  if (fileType.value == 2) {
    dataUploadData2.value = listRes;
  } else {
    dataUploadData.value = listRes;
  }
} catch (err) {
  // 错误处理
  ElMessage.error(err.message);
}

};

// 资料清单下载
const onDownLoad = async (row) => {
try {
// 显示加载状态
const response = await fetch(row.file_url)

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`)
    }
    
    // 获取文件内容作为Blob对象
    const blob = await response.blob()

    // 创建临时URL
    const url = URL.createObjectURL(blob)
    
    // 创建隐藏的a标签用于触发下载
    const link = document.createElement('a')
    link.href = url
      // 默认文件名
      link.download = row.file_name
    // 触发点击事件
    document.body.appendChild(link)
    link.click()
    
    // 清理
    document.body.removeChild(link)
    URL.revokeObjectURL(url)
} catch (err) {
  ElMessage({
    message: err,
    type: 'error'
  });
}

};