下载、上传、函数上传（鳌头）、请求中携带参数

quietness_1

已于 2022-03-26 19:15:36 修改

阅读量993

点赞数

CC 4.0 BY-SA版权

分类专栏： ajax、request 文章标签： vue.js javascript 前端

于 2020-10-13 09:59:43 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45351419/article/details/109045257

ajax、request 专栏收录该内容

3 篇文章

订阅专栏

本文介绍使用Antdv组件库进行文件上传及下载的方法，包括如何利用上传组件实现文件验证及富文本图片上传，并提供两种下载文件的实现方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上传和下载问题困扰很久，我用的antd vue 的组件库

上传

1、antd vue有自己的上传组件

<a-upload name="file" :showUploadList="false" method="post" :multiple="false" :headers="headers":action="importExcelUrl()" @change="handleChange">
</a-upload>

需求，如果需要上传前验证，可以在beforeUpload** 上传前的函数来操作，验证之类的**
2、

/**
 * 文件上传 用于富文本上传图片
 * @param url
 * @param parameter
 * @returns {*}
 */

export function uploadAction(url,parameter){
  return axios({
    url: url,
    data: parameter,
    method:'post' ,
    headers: {
     //headers是一个对象，你的xtoken之类的都可以放在里面
      'Content-Type': 'multipart/form-data',  // 文件上传
    },
  })
}

下载

//headers是一个对象，你的xtoken之类的都可以放在里面
一

/**
 * 下载文件 用于excel导出
 * @param url
 * @param parameter
 * @returns {*}
 */
export function downFile(url,parameter){
  return axios({
    url: url,
    params: parameter,
    method:'get' ,
    responseType: 'blob'
  })
}

二

/**
 * 下载文件
 * @param url 文件路径
 * @param fileName 文件名
 * @param parameter
 * @returns {*}
 */
export function downloadFile(url, fileName, parameter) {
  return downFile(url, parameter).then((data) => {
    if (!data || data.size === 0) {
      Vue.prototype['$message'].warning('文件下载失败')
      return
    }
    if (typeof window.navigator.msSaveBlob !== 'undefined') {
      window.navigator.msSaveBlob(new Blob([data]), fileName)
    } else {
      let url = window.URL.createObjectURL(new Blob([data]))
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', fileName)
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link) //下载完成移除元素
      window.URL.revokeObjectURL(url) //释放掉blob对象
    }
  })
}