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
   })
}