Vue.js 与 SpringBoot 文件上传、图片展示和视频回显攻略

前端

2023-10-24 05:36:06

在 Vue.js 和 SpringBoot 中实现文件上传和下载

摘要

在本教程中，我们将指导你使用 Vue.js 和 SpringBoot 实现文件上传和下载功能。我们将涵盖从项目设置到 Vue.js 和 SpringBoot 代码实现的每一个步骤，使你能够构建一个完整的解决方案来管理用户文件。

技术选型

前端框架：Vue.js
后端框架：SpringBoot
数据库：MySQL
容器：Docker

实现文件上传

1. Vue.js 组件

在 Vue.js 组件中，创建一个 FileUpload.vue 文件来处理文件上传：

<template>
  <div>
    <input type="file" @change="uploadFile">
  </div>
</template>

<script>
import axios from 'axios'

export default {
  methods: {
    uploadFile(event) {
      const file = event.target.files[0]
      const formData = new FormData()
      formData.append('file', file)

      axios.post('/api/files', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        console.log(response)
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

2. SpringBoot 接口

在 SpringBoot 控制器中，创建一个 FileUploadController.java 文件来处理文件上传请求：

@RestController
@RequestMapping("/api/files")
public class FileUploadController {

    @PostMapping
    public ResponseEntity<FileUploadResponse> uploadFile(@RequestParam("file") MultipartFile file) {
        // 处理文件上传逻辑，保存文件到数据库
        // ...

        return ResponseEntity.ok(response);
    }
}

实现文件下载

1. Vue.js 组件

在 Vue.js 组件中，创建一个 FileDownload.vue 文件来处理文件下载：

<template>
  <div>
    <a @click="downloadFile">Download File</a>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  methods: {
    downloadFile() {
      axios.get('/api/files/{id}', {
        responseType: 'blob'
      }).then(response => {
        const url = window.URL.createObjectURL(new Blob([response.data]))
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download', 'file.txt')
        document.body.appendChild(link)
        link.click()
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

2. SpringBoot 接口

在 SpringBoot 控制器中，创建一个 FileDownloadController.java 文件来处理文件下载请求：

@RestController
@RequestMapping("/api/files/{id}")
public class FileDownloadController {

    @GetMapping
    public ResponseEntity<byte[]> downloadFile(@PathVariable Long id) {
        // 处理文件下载逻辑，从数据库中获取文件数据
        // ...

        return ResponseEntity.ok()
                .header("Content-Disposition", "attachment; filename=\"" + fileEntity.getName() + "\"")
                .body(fileEntity.getData());
    }
}

代码示例

Vue.js 代码：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Vuex from 'vuex'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.use(VueRouter)
Vue.use(Vuex)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

SpringBoot 代码：

@SpringBootApplication
public class ServerApplication {

    public static void main(String[] args) {
        SpringApplication.run(ServerApplication.class, args);
    }
}