说明

前面搜索了几个关于springboot+vue+elementui上传下载的文章，感觉写的都不尽如人意。要么是功能不完善，不好用。再者就是源码提供的实在差劲，都不完整。一气之下，自己搞了一个实用的完整版DEMO，有需要的朋友拿走稍加改动就能使用。

项目源码

源码已经整理好了，如何运行直接看根路径下的README.md。

https://gitee.com/indexman/springbootdemo

效果展示


工程结构

前端代码

<!DOCTYPE html>

<html lang="en" xmlns:th="http:www.thymeleaf.org">

<head>

    <meta charset="UTF-8">

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <title>Vue文件上传下载删除DEMO</title>

    <style>

        #app {

            z-index: 1;

            left: 0;

            right: 0;

            top: 0;

            bottom: 0;

            display: flex;

            justify-content: center;

            align-items: center;

            color: #ffffff;

        }

    </style>

</head>

<body>

    <div id="app">

        <el-form :label-width="120">

            <el-form-item label="附件" prop="fileUrl">

                <el-input v-model="fileUrl" :disabled="true"></el-input>

                <el-upload style="width:480px;" class="upload-demo" :action="uploadUrl" :limit="1"

                    :show-file-list="true" :file-list="fileList" :on-remove="handleRemove" :before-remove="beforeRemove"

                    :on-success="uploadSuccess" :on-preview="handlePreview">

                    <el-button size="small" type="primary">点击上传</el-button>

                </el-upload>

            </el-form-item>

        </el-form>

    </div>

    <script src="vue2.6.14.js"></script>

    <script src="elementui.js"></script>

    <script src="axios.min.js"></script>

    <script>

        var baseUrl = 'http://localhost:9000/vueupload/file/';

        var app = new Vue({

            el: '#app',

            data: {

                uploadUrl: baseUrl + 'upload',

                attach: '', // 附件名称

                fileUrl: '', // 附件下载地址

                fileList: []

            },

            methods: {

                handlePreview(file) {

                    let a = document.createElement('a')

                    a.target = '_blank';

                    a.href = this.fileUrl;

                    a.click();

                },

                handleExceed(files, fileList) {

                    this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);

                },

                handleRemove(file, fileList) {

                    axios.post(baseUrl + 'remove?filename=' + this.attach).then((res) => {

                        console.log(res);

                        this.attach = '';

                        this.fileUrl = '';

                    }).catch(err => {

                        console.log(err);    //打印响应数据(错误信息)

                    });

                    console.log('删除文件：' + file.name)

                },

                beforeRemove(file, fileList) {

                    return this.$confirm(`确定移除 ${file.name}？`);

                },

                handleUploadError(error, file) {

                    console.log("文件上传出错：" + error)

                },

                uploadSuccess: function (response, file, fileList) {

                    console.log(response);

                    this.attach = response.data.filename;

                    this.fileUrl = baseUrl + 'download?filename=' + file.name

                }

            }

        });

    </script>

</body>

</html>

后端代码

package com.java.bootdemo.vue_upload_demo.controller;

import com.java.bootdemo.common.util.Result;

import org.slf4j.Logger;

import org.slf4j.LoggerFactory;

import org.springframework.beans.factory.annotation.Value;

import org.springframework.web.bind.annotation.*;

import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.io.*;

import java.net.URLEncoder;

import java.text.SimpleDateFormat;

import java.util.HashMap;

import java.util.Map;

@RestController

@RequestMapping("/file")

public class FileController {

    // 设置固定的日期格式

    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");

    // 将 yml 中的自定义配置注入到这里

    @Value("${app.uploadPath}")

    private String uploadPath;

    // 日志打印

    private Logger log = LoggerFactory.getLogger("FileController");

    // 文件上传 （可以多文件上传）

    @PostMapping("/upload")

    public Result fileUploads(HttpServletRequest request, @RequestParam("file") MultipartFile file) throws IOException {

        // 获取上传的文件名称

        String fileName = file.getOriginalFilename();

        // 得到文件保存的位置以及新文件名

        File dest = new File(uploadPath + fileName);

        // 判断Path是否存在，不存在就创建

        if (!dest.getParentFile().exists()) {

            dest.getParentFile().mkdir();

        }

        try {

            // 上传的文件被保存了

            file.transferTo(dest);

            // 打印日志

            log.info("上传成功，当前上传的文件保存在 {}",uploadPath + fileName);

            // 自定义返回的统一的 JSON 格式的数据，可以直接返回这个字符串也是可以的。

            Map map = new HashMap<>();

            map.put("filename",fileName);

            return new Result<>().ok(map);

        } catch (IOException e) {

            log.error(e.toString());

        }

        // 待完成 —— 文件类型校验工作

        return new Result().error("上传失败");

    }

    @PostMapping("/remove")

    public Result remove(@RequestParam String filename){

        File dest = new File(uploadPath + filename);

        if(dest.exists()){

            // 上传的文件被保存了

            dest.delete();

            // 打印日志

            log.info("{}删除成功",filename);

            return new Result<>().ok("删除成功");

        }

        // 待完成 —— 文件类型校验工作

        return new Result().error("删除失败");

    }

    @GetMapping("/download")

    public void download(@RequestParam String filename, HttpServletResponse response) throws UnsupportedEncodingException {

        File dest = new File(uploadPath + filename);

        if(dest.exists()){

            response.reset();

            response.setContentType("application/octet-stream");

            response.setCharacterEncoding("utf-8");

            response.setContentLength((int) dest.length());

            response.setHeader("Content-Disposition", "attachment;filename="+ URLEncoder.encode( filename , "UTF-8"));

            try(BufferedInputStream bis = new BufferedInputStream(new FileInputStream(dest));) {

                byte[] buff = new byte[1024];

                OutputStream os  = response.getOutputStream();

                int i = 0;

                while ((i = bis.read(buff)) != -1) {

                    os.write(buff, 0, i);

                    os.flush();

                }

            } catch (IOException e) {

                log.error("{}",e);

            }

        }

    }

}

springboot+vue+elementui实现文件上传下载删除DEMO的更多相关文章

  1. SpringMVC ajax技术无刷新文件上传下载删除示例

    参考 Spring MVC中上传文件实例 SpringMVC结合ajaxfileupload.js实现ajax无刷新文件上传 Spring MVC 文件上传下载 (FileOperateUtil.ja ...

  2. SpringBoot后台如何实现文件上传下载

    1.单文件上传: @RequestMapping(value = "/upload") @ResponseBody public String upload(@RequestPar ...

  3. Struts2　文件上传,下载,删除

    本文介绍了: 1.基于表单的文件上传 2.Struts 2 的文件下载 3.Struts2.文件上传 4.使用FileInputStream FileOutputStream文件流来上传 5.使用Fi ...

  4. java操作FTP，实现文件上传下载删除操作

    上传文件到FTP服务器: /** * Description: 向FTP服务器上传文件 * @param url FTP服务器hostname * @param port FTP服务器端口,如果默认端 ...

  5. [java]文件上传下载删除与图片预览

    图片预览 @GetMapping("/image") @ResponseBody public Result image(@RequestParam("imageName ...

  6. SpringBoot入门一：基础知识（环境搭建、注解说明、创建对象方法、注入方式、集成jsp/Thymeleaf、logback日志、全局热部署、文件上传/下载、拦截器、自动配置原理等）

    SpringBoot设计目的是用来简化Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置.通过这种方式,SpringBoot致力于在蓬勃发 ...

  7. nodejs+express-实现文件上传下载管理的网站

    Nodejs+Express-实现文件上传下载管理的网站 项目Github地址(对你有帮助记得给星哟):https://github.com/qcer/updo 后端:基于nodejs的express ...

  8. Spring Boot2(十四)：单文件上传/下载，文件批量上传

    文件上传和下载在项目中经常用到,这里主要学习SpringBoot完成单个文件上传/下载,批量文件上传的场景应用.结合mysql数据库.jpa数据层操作.thymeleaf页面模板. 一.准备 添加ma ...

  9. SpringMVC文件上传下载(单文件、多文件)

    前言 大家好,我是bigsai,今天我们学习Springmvc的文件上传下载. 文件上传和下载是互联网web应用非常重要的组成部分,它是信息交互传输的重要渠道之一.你可能经常在网页上传下载文件,你可能 ...

  10. 一、手把手教你docker搭建fastDFS文件上传下载服务器

    在搭建fastDFS文件上传下载服务器之前,你需要准备的有一个可连接的linux服务器,并且该linux服务器上已经安装了docker,若还有没安装docker的,先百度自行安装docker. 1.执 ...

随机推荐

  1. [转帖]Kubernetes-15：一文详解Pod、Node调度规则(亲和性、污点、容忍、固定节点)

    https://www.cnblogs.com/v-fan/p/13609124.html Kubernetes Pod调度说明 简介 Scheduler 是 Kubernetes 的调度器,主要任务 ...

  2. [转帖]【性能】中断绑定和查看|irqbalance 中断负载均衡|CPU瓶颈

    常用命令 ``` # 查看当前运行情况 service irqbalance status # 终止服务 service irqbalance stop 取消开机启动: chkconfig irqba ...

  3. [转帖]Linux下进程管理知识（详细）总结

    一.简介 本文主要详细介绍进程相关的命令的使用.进程管理及调度策略的知识. 二.常用的命令解析 1.ps命令 命令选项 解析 -a 显示一个终端所有的进程 -u 显示进程的归属用户和内存占用情况 -x ...

  4. 日常测试进行beans比较的简单方法

    日常测试进行beans比较的简单方法 摘要 想每天把有变化的bean抓取出来有新增的beans时能够及时进行分析和介入 保证beans 都是符合规范的. 方式和方法 开启actuator 打开bean ...

  5. 使用 inotifywait的方式监控文件夹发生变化后自动执行脚本的方法

    0. 先安装inotify 最简单的方法为: yum install epel-release 安装扩展包源 yum install inotify-tools 1. 从网上抄了一下脚本 简单记录一下 ...

  6. [LeetCode刷题记录]39 组合总和

    题目描述 给定一个无重复元素的数组 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合.candidates 中的数字可以无限制 ...

  7. vim 从嫌弃到依赖(7)——可视模式

    vim 的可视模式下可以选择一个区域,然后针对区域进行操作.可视模式有点类似于在其他编辑器上使用鼠标选中一块区域然后针对区域进行操作. vim中有3种可视模式,分别用来处理不同范围的文本: 处理字符的 ...

  8. Python 使用Scapy构造特殊数据包

    Scapy是一款Python库,可用于构建.发送.接收和解析网络数据包.除了实现端口扫描外,它还可以用于实现各种网络安全工具,例如SynFlood攻击,Sockstress攻击,DNS查询攻击,ARP ...

  9. 山泽Typec扩展坞M.2移动固态硬盘盒拓展 - 我的硬件配置

  10. Mybatis 源码系列：领略设计模式在 Mybatis 其中的应用

    目录 一.Builder模式 二.工厂模式 三.单例模式 四.代理模式 五.组合模式 六.模板方式模式 七.适配器模式 八.装饰器模式 九.迭代器模式 虽然我们都知道有23种设计模式,但是大多停留在概 ...