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

最新推荐文章于 2025-07-24 17:19:29 发布

原创最新推荐文章于 2025-07-24 17:19:29 发布 · 1.4w 阅读

37 ·

CC 4.0 BY-SA版权

web前端专栏收录该内容

39 篇文章

订阅专栏

本文介绍了在Vue中如何实现文件上传到后台接口以及如何简单地从后台接口下载文件，主要关注文件上传的复杂流程和利用a标签进行文件下载的方法。

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

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

// 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>