说明

前面搜索了几个关于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. Mongo-关系型VS非关系型

    关系型 vs 非关系型 数据库 表 vs 集合 行 vs 文档 列 vs 成员 主键 vs objectId NoSQL => not only sql 是一种互补关系 BSON <= j ...

  2. [转帖]nginx中rewrite和if的用法及配置

    nginx中rewrite和if的用法及配置 文章目录 nginx中rewrite和if的用法及配置 @[toc] 一.rewrite应用 1.rewrite跳转场景 2.rewrite实际场景 3. ...

  3. [转帖]shell脚本实现文本内容比较交互程序

    背景介绍 脚本基于Comm命令进行功能封装,考虑到命令执行前需要对文本进行排序,并且在多文件需要比较内容时可能会导致多个文本混乱,因此使用Shell封装成了一个交互式程序,快速对文件内容进行判断和输出 ...

  4. [转帖]分析redis 大key

    http://www.lishuai.fun/2023/05/05/redis-bigkey/#/%E5%AE%89%E8%A3%85 redis-rdb-tools 是一个 python 的解析 r ...

  5. [转帖]龙叔学ES：Elasticsearch XPACK安全认证

    https://juejin.cn/post/7081994919237287950 本文已参与「新人创作礼」活动,一起开启掘金创作之路. Elasticsearch往往存有公司大量的数据,如果安全不 ...

  6. [转帖]Redhat、CentOS添加静态路由的方法

    https://www.diewufeiyang.com/post/1174.html 我们经常遇到需要在系统默认路由的基础上,额外添加静态路由的需求.为了使得下次系统启动这些静态路由依旧生效,我们可 ...

  7. [转帖]Tail Latency学习

    https://www.cnblogs.com/Rohn/p/15123758.html Latency,中文译作延迟,Tail Latency即尾延迟. 实际生产中的Latency是一种(概率)分布 ...

  8. ZCube：在我的优惠券中的落地实践 | 京东云技术团队

    ​ 前言 我的优惠券作为营销玩法的一种运营工具,在营销活跃场中起到很至关重要的作用.如何更加高效的赋能业务,助理业务发展,灵活扩展业务,是我们一直追求和思考的方向 一.背景 1.1 现状 营销中台作为 ...

  9. Redis极简教程

    简介 Redis 是用C语言开发完全开源免费的,遵守BSD协议的,一个高性能的,key-value型的,NOSQL数据库. 特点 可以将内存中的数据持久化到硬盘中,重启的时候可以从硬盘中再次加载 拥有 ...

  10. 装elemnetUI中用户头像上传

    组件.vue 在使用的时候,入股想出现边框.要自己在添加一个类哈 自己还有在添加一个哈 .avatar-uploader { border:1px solid red; width: 178px; h ...