axios文件上传下载

文件上传

<input type="file" @change="upload($event)" />

 // 引入axios
 import axios from 'axios'
  
 // 配置axios
 const instance = axios.create({
     baseURL: 'http://127.0.0.1:3000',      //服务器地址
   headers: {
       'Content-Type': 'multipart/form-data'       // 设置为文件类型
   } 
 })
 
 const typeArr = ['txt','png','rar']   // 可上传的文件类型
 let formData = new FormData()   
 
 upload: function(event){
   let file = event.target.files[0]     //  获取文件
   let type = file.name.split('.')[1]  // 获取文件类型
   if(typeArr.indexOf(type) < 0){
      console.log('上传的文件类型有误')
      return  
   }
   
   let size = file.size                // 文件大小
   if(size / (1024 * 1024) > 5){
     console.log('文件不能大于5M')
      return
   }
 
   formData.append('file', file, file.name)
   instance.post('upload/file',formData).then(res => {
     if(res.data.code === 0) {
        console.log('文件上传成功')
        formData.value = null     // 清空 input 框
     }   
   })
 }  

文件下载

  // 引入axios
  import axios from 'axios'
  
  download:function(){
    axios({
      mtehod: 'post',
      url: 'http://127.0.0.1:3000/file',
     headers: {
        Accept: '*/*'          // 接收任意类型的文件
     },
     responseType: 'blob' ,      // 接收数据类型为 blob类型
     data: null
   }).then(res => {
     let blob = res.data         // 接收到的数据
 
     let eleLink = document.createElement('a')   // 创建 a标签
     let url = window.URL.createObjectURL(blob)   // 创建url对象 指向blob
     eleLink.href = url        // 设置a标签的href属性
     eleLink.download = `文件名字.txt`          // 下载的文件名 后缀名与后台约定
     document.body.appendChild(eleLink)   // 将a标签添加到文档中
     eleLink.click()    //执行点击事件 开始下载
     window.URL.revokeObjectURL(url)    // 释放指定的url
   })
}