vue 文件上传到后台接口以及从后台接口下载文件

文件上传操作稍微复杂点，有如下两种

// vue前端页面部分（使用老式的input按钮上传，贼丑）
<template>
  <div>
    <input type="file" @change="inputFileChange"> 
    <el-button type="primary" size="mini" @click="clicks">上传</el-button>
  </div>
</template>
 
<script>
import { UploadFiles } from '@/api/plan'
export default {
  data () {
    return {
      files:''
    }
  },
  mounted: function () {

  },
  methods: {
    inputFileChange(e) {
      this.files = e.target.files[0]
    },

    clicks() {
      if(this.files){
        let fd = new FormData()
        fd.append('file',this.files)
        UploadFiles(fd).then(res => {
          
        })
      }
    }
  }
}
</script>
 
<style scoped>

</style>
// 使用el-upload组件上传
<template>
  <div>
    <el-upload
        drag
        multiple
        ref="upload"
        action="string"
        :before-upload="onBeforeUploadImage"
        :http-request="UploadImage"
        :file-list="fileList">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传rvt</div>
    </el-upload>
  </div>
</template>
 
<script>
import {UploadFiles} from '@/api/plan'
export default {
  data () {
    return {

    }
  },
  mounted: function () {

  },
  methods: {
   // 文件提交之前的操作 可以进行type类型的判断
    onBeforeUploadImage (file) {
      console.log(file)
    },
    // 文件提交
    UploadImage (param) {
      let fd = new FormData()
      console.log('param.file',param.file)
      fd.append('file', param.file) // 要提交给后台的文件
      UploadFiles(fd).then(response => {  // UploadFiles 是封装的接口
        
      })
    }

  }
}
</script>
 
<style scoped>

</style>


// 连后台接口部分
// 上传 UploadFiles
export function UploadFiles(formData) {
  return request({
    url: '/auditufileinfo/uploadPlanBatchTemplate',
    method: 'post',
    data: formData
  })
}

文件从后台接口下载到本地就很简单了，一个a标签里面有后台接口url就可以，剩下的就交给浏览器来做：

<a href="你的后台小伙伴的接口完整地址">下载文件</a>