Vue3_上传文件_下载文件

一、上传文件

二、下载文件

vue3对接后端进行文件上传和下载。

一、上传文件

点击上传资料按钮，选择文件，进行上传。

创建一个proFile.vue，文件，这个文件可以作为一个子组件在其他页面引用。

组件用的element-Plus的ElMessageBox, ElLoading，以及el-upload，el-button。

style 用的lang="less"。

proFile.vue：

javascript 复制代码

<template>
  <div class="profileContainer">
    <div class="upload">
      <div class="btnStyle">
        <div class="eduData">上传资料</div>
      </div>
      <el-upload
        class="upload-demo"
        action=""
        :http-request="handleUpload"
        :before-upload="beforeUpload"
        :on-change="
          (file, fileList) => {
            handleChanges(file, fileList);
          }
        "
        v-model="upload"
        :show-file-list="false"
        :on-preview="handlePreview"
      >
        <el-button size="default" type="primary" class="hidddenBtn">上传资料 </el-button>
      </el-upload>
    </div>
  </div>
</template>

<script setup>
import { reactive, toRefs, computed } from "vue";
import { ElMessageBox, ElLoading } from "element-plus";

const state = reactive({
  upload: [],
  loading: false,
});
const { upload, loading } = toRefs(state);

// 弹框
const message = (info) => {
  return ElMessageBox.confirm(`${info}`, {
    confirmButtonText: "确定",
    showCancelButton: false,
    type: "warning",
  }).then(
    () => true,
    () => false
  );
};

// 更改上传路径,覆盖默认的上传行为，可以自定义上传的实现
const handleUpload = (paramFile) => {
  let param = new FormData();
  param.append("file", paramFile.file);
  param.append("uid", paramFile.file.uid);
  uploadFile(param);
  return Promise.resolve();
};

const uploadFile = async (param) => {
  const loading = ElLoading.service({
    lock: true,
    text: "正在上传中，请耐心等待，谢谢！",
    background: "rgba(0, 0, 0, 0.5)",
  });

  //reqFileUpload，换成你自己的后端接口
  let result = await reqFileUpload(param);
  if (result.error_code == 0) {
    loading.close();
    //上传成功
  } else {
    loading.close();
    //上传失败
  }
};

// 上传前触发，判断文件是否符合大小要求，当前设定大小为50M
const beforeUpload = (file, fileList) => {
  const isLt2M = file.size / 1024 / 1024 < 50;
  // 文件大小限制
  if (!isLt2M) {
    ElMessageBox.confirm(`上传文件大小不能超过 500MB! 请重新上传~`, {
      confirmButtonText: "确定",
      showCancelButton: false,
      type: "warning",
    }).then(
      () => true,
      () => false
    );
    fileList.splice(-1, 1); //移除当前超出大小的文件
    return false;
  }
  return isLt2M;
};

// 文件改变触发
const handleChanges = (file, fileList) => {
  state.upload = fileList;
};
</script>

<style lang="less" scoped>
.profileContainer {
  position: relative;

  .upload {
    position: relative;
    border: none;

    .btnStyle {
      width: 76px;
      height: 36px;
      border-radius: 4px 4px 4px 4px;
      padding: 0 10px;
      text-align: center;
      font-size: 14px;
      color: #00b498;
      line-height: 36px;
      border: none;
      margin-right: 10px;

      .eduData {
        width: 76px;
        height: 34px;
        line-height: 34px;
        background: #d2ebff;
        font-size: 14px;
        color: #000;
        border: none;
        text-align: center;
        border-radius: 4px 4px 4px 4px;
      }
    }

    .hidddenBtn {
      position: absolute;
      left: 30px;
      top: 5px;
      width: 75px;
      opacity: 0;
    }
  }

  img {
    position: relative;
    top: 0;
    width: 14px;
    height: 14px;
  }

  .showFile {
    background-color: #a6e3c5;

    .fileName {
      display: inline-block;
      width: 140px;
      height: 22px;
      line-height: 22px;
      background-color: #fff;
      margin-right: 20px;
    }
  }
}

:deep(.upload-demo) {
  position: relative;
  top: -40px;
  left: -20px;
}

:deep(.el-upload-list) {
  width: 870px;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  top: 5px;
  left: 20px;
  max-height: 85px;
}

:deep(.el-upload-list__item) {
  float: left;
  width: 145px;
  height: 22px;
  line-height: 22px;
  background-color: #f8faf9;
  margin-right: 20px;
}

:deep(.el-progress) {
  opacity: 0;
}

:deep(.el-upload-list__item .el-icon--upload-success) {
  z-index: 1000;
  opacity: 1;
}
</style>

二、下载文件

从后端获取到Blob类型的文件，Blob（Binary Large Object）表示二进制类型的大对象，通常是影像、声音或多媒体文件。MySql/Oracle数据库中，就有一种Blob类型，专门存放二进制数据。在 JavaScript 中 Blob 对象表示一个不可变、原始数据的类文件对象，它不一定非得是大量数据，也可以表示一个小型文件的内容。

下载文件方法：

javascript 复制代码

//从后端获取这个方法，调用这个方法下载文件，传入文件name。param是一个文件标志，获取当前文件内容
const downLoadFileSuccess = async (name, param) => {
  //reqDownloadFile从后端获取文件数据的接口，param是一个文件标志，获取当前文件内容
  let result = await reqDownloadFile(param);
  if (result != undefined) {
    //浏览器下载
    const myBlob = new window.Blob([result], { type: result.type });
    const qrUrl = window.URL.createObjectURL(myBlob);
    var fileLink = document.createElement("a");
    fileLink.href = qrUrl;
    fileLink.setAttribute("download", name);
    document.body.appendChild(fileLink);
    fileLink.click();
  } else {
    console.log(result.datas_info)
  }
};