说明

前面搜索了几个关于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. SpringMVC05——SSM整合

    整合SSM 需求:熟练掌握MySQL数据库,Spring,JavaWeb及MyBatis知识,简单的前端知识 CREATE DATABASE `ssmbuild`; USE `ssmbuild`; D ...

  2. 这一次，弄明白JS中的文件相关（二）：HTTP请求头和响应头

    (一)前置知识 开始前,我们先来复习一下HTTP的基础知识. HTTP请求分为:请求行.请求头.空行.请求体(也叫正文.请求实体.请求主体). HTTP响应分为:状态行(也叫响应行).响应头.空行.响 ...

  3. [转帖]tidb集群部署

    http://blog.itpub.net/29785807/viewspace-2789852/ 一.安装规划 1 2 3 4 5 6 使用15台服务器 5台tidb服务器:每台3个tidb实例+1 ...

  4. [转帖]linux系统目录结构介绍

    linux的目录结构 Linux系统各个目录的作用 /: 根目录.有且只有一个根目录.所有的东西都是从根目录开始.举个例子:当你在终端里输入"/home",你其实是在告诉服务器,先 ...

  5. 玩一玩golang汇编

    作者:张富春(ahfuzhang),转载时请注明作者和引用链接,谢谢! cnblogs博客 zhihu Github 公众号:一本正经的瞎扯 因为只是玩一玩,所以走的路线是:用C写代码,把C编译成AT ...

  6. 【K哥爬虫普法】百度、360八年恩怨情仇，robots 协议之战终落幕

    我国目前并未出台专门针对网络爬虫技术的法律规范,但在司法实践中,相关判决已屡见不鲜,K哥特设了"K哥爬虫普法"专栏,本栏目通过对真实案例的分析,旨在提高广大爬虫工程师的法律意识,知 ...

  7. python.exe和pythonw.exe的区别（区分.py、.pyw、.pyc、.pyo文件）

    python和pythonw 在Windows系统搭建好Python的环境后,进入Python的安装目录,大家会发现目录中有python.exe和pythonw.exe两个程序.如下图所示: 它们到底 ...

  8. 获取Unity和UGUUI内置组件的属性名

    需求来源 在阅读UGUI的源码时,发现Unity对于私有字段才加了[[SerializeField]]标签,而public的没有,且在Editor扩展中,也是查找带序列化标签的私有字段进行修改,那么在 ...

  9. vim 从嫌弃到依赖(4)—— .命令

    通过之前几篇文章的介绍,如果各位小伙伴能够勤加练习,并在日常工作上经常使用,那么相信那些内容已经会对工作效率的提升产生好的影响.但是如果那些就是vim的全部的话,我们也就没那么大的必要花这么大的精力来 ...

  10. TienChin 项目改造完善&项目结构分析

    项目改造完善 更改 Banner Banner 生成网站:https://bootschool.net/ascii 更改启动类中的 Banner !> 如果不生效,需要重新编译一下项目工程(出现 ...