文件的上传与下载

最新推荐文章于 2024-04-19 17:44:20 发布

qq_37789612

最新推荐文章于 2024-04-19 17:44:20 发布

阅读量111

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_37789612/article/details/124092332

版权

"这篇博客介绍了如何使用JavaScript处理文件上传和下载。在上传部分，通过`<input type="file">`元素获取文件，并以FormData形式提交。下载部分，利用IFrame和Form创建隐藏表单，结合access_token进行身份验证，实现文件的后台下载。"

摘要由CSDN通过智能技术生成

1.上传或者导入文件及接收流

<input type="file" onChange={this.readExcel}>
onChange = (evt) => {
  const file = evt && evt.target && evt.target.files[0]
  // 提交的时候以流的形式传输
  const data = new FormData()
  data.append('multipartFile', file)
}

2. 文件的导出及下载模板g

import queryString from 'queryString'
import Cookies from 'universal-cookie'

const ACCESS_TOKEN = 'access_token'

const cookies = new Cookies()

function getAccessToken() {
    const privateRoute = window.location.pathname.startWith('.private')
    const privateToken = queryString.parse(window.location.search) || {}
    return privateToken ? privateToken.access_token : Cookies.get(ACCESS_TOKEN, {
    path: '/'
})
}


export async function downloadFile(params = {}) {
    const { requestUrl: url, queryParams = {}, method = ''get } = params
    let url =url
    const iframeName = `${url}${Math.random()}`

    const iframe = document.createElement('iframe');
    iframe.setAttribute('name', iframeName);
    iframe.setAttribute('id', iframeName);
    iframe.style.width = '0px';
    iframe.style.height= '0px';
    iframe.style.display = 'none';

// 构建dom
    const downloadForm = document.createElement('form');
// 设置token
    const tokenInput = document.createElement('input');
    tokenInput.setAttribute('type', 'hidden');
    tokenInput.setAttribute('name', 'access_token');
    tokenInput.setAttribute('value', `${getAccessToken()}`);

// 处理post请求时token校验
    if(method = 'post') {
    newUrl = `${newUrl}?access_token=${getAccessToken()}`
}

// 表单添加请求配置
    downloadForm.setAttribute('method', method);
    downloadForm.setAttribute('action',newUrl);
    downloadForm.appendChild(tokenInput);

for(const [key, value] of Object.entries(queryParams)) {
    const input = document.createElement('input');
    input.setAttribute('type', 'hidden');
    input.setAttribute('name', key);
    input.setAttribute('value', value);
    downloadForm.appendChild(input);
}

document.body.appendChild(iframe)
document.body.appendChild(downloadForm)
downloadForm.submit()
return true
}