前端对静态文件excel的下载以及文件上传操作

将静态文件放置在public文件夹下，可以设置专门文件去放置静态文件

封装el-upload下载组件

因为有文件样式展示需求，因此文件上传后不展示el-upload组件自己的文件上传成功样式
:show-file-list="false"

<template>
  <el-upload
    class="upload-demo"
    action
    :http-request="httpRequest"
    :limit="2"
    accept=".xlsx, .xls"
    :on-exceed="handleExceed"
    :on-change="handleChange"
    :on-success="handleSuccess"
    :show-file-list="false"
    :file-list="fileList">
    <div v-if="!applyData.visitListName">
      <span style="color: #A6A6A6;margin-right: 20px;">请上传模板，点击右侧按钮进行上传</span>
      <el-button
        size="medium"
        style="padding: 0;"
        type="text">点击上传</el-button>
      <el-button
        size="medium"
        type="text"
        style="padding: 0;"
        @click="downloadExcel">模板下载</el-button>
    </div>
    <div v-else>
      <span
        style="text-decoration: underline; color: #3464E0;cursor: pointer;"
        @click="handDown()">{
  
  { applyData.visitListName }}</span>
      <el-button
        style="margin-left: 15px;padding: 0;"
        size="medium"
        type="text">重新上传</el-button>
    </div>
  </el-upload>
</template>

<script>

export default {
  // 文件上传
  name: 'FileUpload',
  data() {
    return {
      fileList: [],
      applyData: {}
    };
  },
  props: {
    // 表单信息
    applyFrom: {
      type: Object,
      default: null
    }
  },
  watch: {
    applyFrom: {
      handler(newval) {
        this.applyData = newval;
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    downloadExcel() {
      const a = document.createElement('a');
      a.href = '/excel/模板.xlsx'; // 替换为你的文件路径
      a.download = '模板.xlsx'; // 替换为你的文件名
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    },
    handleExceed(files, fileList) {
      //  当文件数量超过限制时，移除旧文件，添加新文件
      this.fileList = [files[0]];
      // this.$message.warning(`只能上传${ files.length } 个文件`);
    },
    handleChange(file, fileList) {
      if (fileList.length > 1 && file.status !== 'fail') {
        fileList.splice(0, 1);
      }
    },
    handleSuccess(response, file, fileList) {
      this.fileList = [file];
    },
    httpRequest({ file }) {
      this.$emit('httpRequest', file);
    },
    handDown() {
      this.$emit('handDown');
    }
  }
};
</script>

父组件调用方法

<template>
<FileUpload
 :key="fileUploadkey"
 ref="fileUploadRef"
 :applyFrom="applyFrom"
 @httpRequest="httpRequest"
 @handDown="handDown"/>
</template>

<script>
import { download, upload, uploadVisitListFile } from '@/services/applyFrom';

export default {
  components: {
    FileUpload: () => import('@/components/upload')
  },
  data(){
    return{
      applyFrom:{}
      fileUploadkey: new Date().getTime() - 1
    }
  },
  methods: {
    async httpRequest(file) {
      await upload({ file: file, type: file.type }).then(res => {
        this.applyFrom.visitListUuid = res.data.uuid;
        this.applyFrom.visitListName = res.data.fileName;
      });
      const params = {
        id: this.applyId,
        visitListUrl: this.applyFrom.visitListUuid ,
        visitListName: this.applyFrom.visitListName
      };
      uploadVisitListFile(params).then(res => {});
      this.fileUploadkey = new Date().getTime();
    },
    handDown() {
      download({ fileUuid: this.applyFrom.visitListUuid }).then();
    }
  }
}
</script>