SperingBoot+vue文件上传&下载&预览_vue文件上传与下载-优快云博客

本文链接：https://blog.youkuaiyun.com/PCthedream/article/details/135192084

本文介绍了如何使用SpringBoot后端与Vue前端实现文件上传、动态a标签下载以及预览功能。前端利用FormData配合File进行文件上传，并通过URL.createObjectURL实现预览；后端使用MultipartFile接收文件并保存。下载功能则通过动态创建隐藏的a标签触发点击事件实现，预览功能同样涉及前后端交互处理。

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

上传文件：

前端：

整个过程，就是在使用FormData 添加上File（这个Blob），并且key要和后台的名字对应上
在点击上传按钮开始上传之前，使用了URL.createObjectURL(File)创建blobUrl，给了img标签作图片预览
上传完毕后，将input file的value置为空。若将input file置为空，则此时不能再从input file中获取file了，得等下次再选择图片才能获得file，将它置为空的目的是为了下次选择同样的图片，也能触发input file的change事件

后端：

后台仅仅就是用MultipartFile声明接收即可，可以使用@RequestParam注解或 @RequestPart注解
调用MultipartFile#transferTo保存文件
可以从MultipartFile#getInputStream中获取流，比如上传到OSS。

前端代码：

<template>
    <div>
        选择文件: <input type="file" ref="fileInputRef" @change="selectFile" multiple> <!-- 使用multiple属性,可选择多个文件 -->
        <br/>
        <img v-if="imgUrl" :src="imgUrl" alt="" style="width:54px;height:54px;">
        <el-button v-if="imgUrl" type="primary" @click="uploadFile">上传</el-button>

        <hr/>
    </div>
</template>

<script>
import axiosInstance from '@/utils/request.js'
import axios from 'axios'
export default {
    name: 'File',
    data() {
        return {
            imgUrl:''
        }
    },
    methods: {
        selectFile() {

            let file = this.$refs['fileInputRef'].files[0]
            console.log(file)

            //