上传下载文件接口封装

页面点击事件方法：

// 下载文件流

const downfile = () => {

  exportFile({ temppw: "xxx", scriptname: 'xxx'}).then((res) => {

    let a = document.createElement("a");

    a.download = state.filename;

    a.style.display = "none";

    let url = URL.createObjectURL(res);

    a.href = url;

    document.body.appendChild(a);

    a.click();

    URL.revokeObjectURL(url); // 销毁

    document.body.removeChild(a);

  });

};

在service下新建后台接口文件

eg.

import { request } from '@/utils/request'

import {fileUpload} from '@/utils/fileApi'

// 上传文件

export function importFile(params:any) {

  return fileUpload('/v1/host/script/scriptfile', params)

}

// 下载文件

export function exportFile(params:any) {

  return request({

    url: `/v1/host/script/scriptfile?temppw=${params.temppw}&scriptname=${params.scriptname}`,

    method: 'get',

    responseType: 'blob',

  })

}

 

在utils下新建fileApi.ts

code:

import request from './request';

export function fileUpload(url:string, params:any) {

  const formData = new FormData();

  if (params.file instanceof Array) {

    params.file.forEach((item:any) => {

      formData.append('files', item);

    })

  } else {

    formData.append('script_data', params.file);

  }

  formData.append('temppw','zhtaaa'); //接口其他传参

  formData.append('filename',params.file.name);

  return request({

    url: url,

    method: 'post',

    headers: {

      'Content-Type': 'multipart/form-data'

    },

    data: formData

  })

}