vue 封装文件上传/下载请求方法

效果图：

xxx.vue

      <el-descriptions class="margin-top" title="" :column="1" :size="serverPackageFormSize" border>
        <template slot="extra">
            <el-upload
              ref="uploader"
              class="upload-demo"
              action=""
              :limit="1"
              :show-file-list="false"
              :disabled="upload_loading"
              :http-request="replacePackage"
              :on-exceed="handleExceed"
              :file-list="fileList">
              <el-button type="success" v-hasPermi="['printServer:package:upload']" :loading="upload_loading" size="small" >上传</el-button>
            </el-upload>
            <el-button type="primary" size="small" v-hasPermi="['printServer:package:download']" @click="downLoadPackage">下载</el-button>
          

        </template>
        <el-descriptions-item>
          <template slot="label">
            上传人员
          </template>
            {{serverPackageObj.createUserName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            上传时间
          </template>
            {{formatDate(serverPackageObj.createTime)}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            版本号
          </template>
            {{serverPackageObj.version}}
        </el-descriptions-item>
      </el-descriptions>

import {
  downLoadPackage,
  uploadPackage
} from "@/api/user/server.js";

    // 下载数据包
    downLoadPackage(){
      downLoadPackage().then(response => {
        const data = response;
        const fileReader = new FileReader();
        fileReader.onload = () => {
          try {
            // 说明是普通对象数据，后台转换失败
            const jsonData = JSON.parse(fileReader.result)
            if(jsonData.code){
              this.$modal.msgError(jsonData.msg)
            }
          } catch (err) {
            // 解析成对象失败，说明是正常的文件流
            const elink = document.createElement("a");
            elink.href = window.URL.createObjectURL(new Blob([response], {type: `application/zip`}));
            elink.style.display = 'none';
            elink.setAttribute('download', `package_${new Date().getTime()}`);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
          } 
        }
        fileReader.readAsText(data)
      }).catch(err => {
        console.log('错误信息:', err)
      })
    },

    // 替换数据包
    replacePackage(item){
      console.log('上传的文件：', item)
      const fd = new FormData()
      fd.append('file', item.file)
      // 开启loding
      this.upload_loading = true
      uploadPackage(fd).then(res => {
          console.log('文件上传结果:', res)
          if(res.code===200){
            this.$modal.msgSuccess('上传成功')
            this.watchServerPackage()
          } else {
            this.$modal.msgError(res.msg)
          }
          this.upload_loading = false
          this.$refs.uploader.clearFiles()
        }).catch(err => {
          console.log('文件上失败:', err)
          this.upload_loading = false
          this.$refs.uploader.clearFiles()
        });
    },

server.js

import { uploadFile } from '@/utils/request'
// 上传数据更新包
export function uploadPackage(data) {
  return uploadFile({
    url: '/printServer/package/file/upload',
    data: data
  })
}
// 下载数据包
export function downLoadPackage() {
  return getFileStream('/printServer/package/file')
}

utils/request.js

// 获取文件流
export function getFileStream(url) {
  return service.get(url, {
    responseType: 'blob'
  }).then(res => {
    return res
  }).catch((r) => {
    console.error(r)

  })
}

// 上传文件
export function uploadFile({url, data}) {
  return service.post(url, data, {
    headers: { 'Content-Type': 'multipart/form-data' }
  }).then(res => {
    return res
  }).catch((r) => {
    console.error(r)
  })
}