devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue+springboot实现文件上传_vue+springboot文件上传

作者：知新_RL | 2024-04-07 08:48:42

赞

踩

vue+springboot文件上传

①后端springboot创建controller

FileController:

  1. package com.example.springboot.controller;
  2.  
  3. import cn.hutool.core.io.FileUtil;
  4. import com.example.springboot.common.AuthAccess;
  5. import com.example.springboot.common.Result;
  6. import org.springframework.beans.factory.annotation.Value;
  7. import org.springframework.web.bind.annotation.*;
  8. import org.springframework.web.multipart.MultipartFile;
  9.  
  10. import javax.servlet.ServletOutputStream;
  11. import javax.servlet.http.HttpServletResponse;
  12. import java.io.File;
  13. import java.io.IOException;
  14. import java.net.URLEncoder;
  15.  
  16. @RestController
  17. @RequestMapping("/file")
  18. public class FileController {
  19.     @Value("${ip:localhost}")
  20.     String ip;
  21.  
  22.     @Value("${server.port}")
  23.     String port;
  24.  
  25.     private static final String ROOT_PATH=System.getProperty("user.dir")+File.separator+"files";
  26.     @PostMapping("/upload")
  27.     public Result upload(MultipartFile file) throws IOException{
  28.         String originFilename= file.getOriginalFilename();
  29.         String mainName= FileUtil.mainName(originFilename);
  30.         String extName=FileUtil.extName(originFilename);
  31.         if(!FileUtil.exist(ROOT_PATH)){
  32.             FileUtil.mkdir(ROOT_PATH);
  33.         }
  34.         if(FileUtil.exist(ROOT_PATH+File.separator+originFilename)){
  35.             originFilename=System.currentTimeMillis()+"_"+mainName+"."+extName;
  36.         }
  37.         File saveFile=new File(ROOT_PATH+File.separator+originFilename);
  38.         file.transferTo(saveFile);
  39.         String url="http://"+ip+":"+port+"/file/download/"+originFilename;
  40.         return Result.success(url);
  41.     }
  42.  
  43.     @AuthAccess
  44.     @GetMapping("/download/{filename}")
  45.     public void download(@PathVariable String filename,HttpServletResponse response) throws IOException {
  46. //        response.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(filename, "UTF-8")); // 附件下载
  47.         response.addHeader("Content-Disposition", "inline;filename=" + URLEncoder.encode(filename, "UTF-8")); // 预览
  48.         String filePath=ROOT_PATH+File.separator+filename;
  49.         if(!FileUtil.exist(filePath)){
  50.             return;
  51.         }
  52.         byte[] bytes=FileUtil.readBytes(filePath);
  53.         ServletOutputStream outputStream=response.getOutputStream();
  54.         outputStream.write(bytes);
  55.         outputStream.flush();
  56.         outputStream.close();
  57.     }
  58. }

②修改yml文件：配置url和port等全局变量

application.yml:

  1. server:
  2.   port: 9090
  3.  
  4. spring:
  5.   datasource:
  6.     driver-class-name: com.mysql.cj.jdbc.Driver
  7.     url: jdbc:mysql://${ip}:3306/honey2024?useSSL=false&useUnicode=true&characterEncoding=UTF-8&serverTimezone=GMT%2b8
  8.     username: root
  9.     password: 123456
  10.   servlet:
  11.     multipart:
  12.       max-file-size: 20MB
  13.       max-request-size: 20MB
  14. ip: localhost

③配置全局异常文件

GlobalExeception：

  1. package com.example.springboot.exception;
  2.  
  3. import com.example.springboot.common.Result;
  4. import org.springframework.web.bind.annotation.ControllerAdvice;
  5. import org.springframework.web.bind.annotation.ExceptionHandler;
  6. import org.springframework.web.bind.annotation.ResponseBody;
  7.  
  8. @ControllerAdvice
  9. public class GlobalExeception {
  10.  
  11.     @ExceptionHandler(ServiceException.class)
  12.     @ResponseBody
  13.     public Result serviceException(ServiceException e){
  14.         return Result.error(e.getCode(),e.getMessage());
  15.     }
  16.  
  17.     @ExceptionHandler(Exception.class)
  18.     @ResponseBody
  19.     public Result globalException(Exception e){
  20.         e.printStackTrace();
  21.         return Result.error("500","系统错误");
  22.     }
  23.  
  24. }

运行效果：

 

 访问一下这个url，发现可以预览：说明上传功能和预览，下载功能就完成了

至此后端的工作已经完成 

④前端修改编写页面

 

HomeView.vue:

  1. <template>
  2.   <div>
  3.     <el-container>
  4.       <!--    侧边栏  -->
  5.       <el-aside :width="asideWidth" style="min-height: 100vh; background-color: #001529">
  6.         <div style="height: 60px; color: white; display: flex; align-items: center; justify-content: center">
  7.           <img src="@/assets/logo1.png" alt="" style="width: 40px; height: 40px">
  8.           <span class="logo-title" v-show="!isCollapse">honey2024</span>
  9.         </div>
  10.  
  11.         <el-menu :collapse="isCollapse" :collapse-transition="false" router background-color="#001529" text-color="rgba(255, 255, 255, 0.65)" active-text-color="#fff" style="border: none" :default-active="$route.path">
  12.           <el-menu-item index="/">
  13.             <i class="el-icon-menu"></i>
  14.             <span slot="title">系统首页</span>
  15.           </el-menu-item>
  16.           <el-menu-item index="/1">
  17.             <i class="el-icon-house"></i>
  18.             <span slot="title">系统首页</span>
  19.           </el-menu-item>
  20.           <el-menu-item index="/2">
  21.             <i class="el-icon-house"></i>
  22.             <span slot="title">系统首页</span>
  23.           </el-menu-item>
  24.           <el-submenu index="3">
  25.             <template slot="title">
  26.               <i class="el-icon-menu"></i>
  27.               <span>信息管理</span>
  28.             </template>
  29.             <el-menu-item>用户信息</el-menu-item>
  30.             <el-menu-item>管理员信息</el-menu-item>
  31.             <el-menu-item index="/">系统首页</el-menu-item>
  32.           </el-submenu>
  33.         </el-menu>
  34.  
  35.       </el-aside>
  36.  
  37.       <el-container>
  38.         <!--        头部区域-->
  39.         <el-header>
  40.  
  41.           <i :class="collapseIcon" style="font-size: 26px" @click="handleCollapse"></i>
  42.           <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-left: 20px">
  43.             <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  44.             <el-breadcrumb-item :to="{ path: '/user' }">用户管理</el-breadcrumb-item>
  45.           </el-breadcrumb>
  46.  
  47.           <div style="flex: 1; width: 0; display: flex; align-items: center; justify-content: flex-end">
  48.             <i class="el-icon-quanping" style="font-size: 26px" @click="handleFull"></i>
  49.             <el-dropdown placement="bottom">
  50.               <div style="display: flex; align-items: center; cursor: default">
  51.                 <img src="@/assets/logo1.png" alt="" style="width: 40px; height: 40px; margin: 0 5px">
  52.                 <span>管理员</span>
  53.               </div>
  54.               <el-dropdown-menu slot="dropdown">
  55.                 <el-dropdown-item>个人信息</el-dropdown-item>
  56.                 <el-dropdown-item>修改密码</el-dropdown-item>
  57.                 <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
  58.               </el-dropdown-menu>
  59.             </el-dropdown>
  60.           </div>
  61.  
  62.         </el-header>
  63.  
  64.         <!--        主体区域-->
  65.         <el-main>
  66.           <div style="box-shadow: 0 0 10px rgba(0,0,0,.1); padding: 10px 20px; border-radius: 5px; margin-bottom: 10px">
  67.             早安，骚年，祝你开心每一天！
  68.           </div>
  69.           <div style="display: flex;">
  70.             <el-card style="width: 30%;margin-right: 10px;">
  71.               <div slot="header" class="clearfix">
  72.                 <span>青哥哥带你做毕设2024</span>
  73.               </div>
  74.               <div>
  75.                 2024毕设正式开始了！青哥哥带你手把手敲出来！
  76.                 <div style="margin-top: 20px">
  77.                   <div style="margin: 10px 0"><strong>主题色</strong></div>
  78.                   <el-button type="primary">按钮</el-button>
  79.                   <el-button type="success">按钮</el-button>
  80.                   <el-button type="warning">按钮</el-button>
  81.                   <el-button type="danger">按钮</el-button>
  82.                   <el-button type="info">按钮</el-button>
  83.                 </div>
  84.               </div>
  85.             </el-card>
  86.             <el-card style="width: 70%;">
  87.               <div slot="header" class="clearfix">
  88.                 <span>渲染用户的数据</span>
  89.               </div>
  90.               <div>
  91.                 <el-table :data="users">
  92.                   <el-table-column label="ID" prop="id"/>
  93.                   <el-table-column label="用户名" prop="username"/>
  94.                   <el-table-column label="姓名" prop="name"/>
  95.                   <el-table-column label="地址" prop="address"/>
  96.                   <el-table-column label="文件上传">
  97.                     <template v-slot="scope">
  98.                       <el-upload
  99.                           action="http://localhost:9090/file/upload"
  100.                           :show-file-list="false"
  101.                           :headers="{token: user.token}"
  102.                           :on-success="(row,file,fileList)=>handleTableFileUpload(scope.row,file,fileList)"
  103.                       >
  104.                         <el-button size="mini" type="primary">点击上传</el-button>
  105.                       </el-upload>
  106.                     </template>
  107.                   </el-table-column>
  108.                   <el-table-column label="文件下载">
  109.                     <template v-slot="scope">
  110.                       <el-image v-if="scope.row.avatar" :src="scope.row.avatar" style="width: 50px;height: 50px"></el-image>
  111.                       <div>
  112.                         <el-button @click="preview(scope.row.avatar)">
  113.                           预览
  114.                         </el-button>
  115.                       </div>
  116.                     </template>
  117.                   </el-table-column>
  118.                 </el-table>
  119.               </div>
  120.             </el-card>
  121.           </div>
  122.           <div style="display: flex;margin: 10px 0">
  123.             <el-card style="width: 50%;margin-right: 10px;">
  124.               <div slot="header" class="clearfix">
  125.                 <span>文件上传下载</span>
  126.               </div>
  127.               <div>
  128.                 <el-upload
  129.                     action="http://localhost:9090/file/upload"
  130.                     list-type="picture"
  131.                     :headers="{token: user.token}"
  132.                     :on-success="handleFileUpload"
  133.                 >
  134.                   <el-button size="small" type="primary">单文件上传</el-button>
  135.                 </el-upload>
  136.               </div>
  137.               <div style="margin: 10px 0">
  138.                 <el-upload
  139.                     action="http://localhost:9090/file/upload"
  140.                     :headers="{token: user.token}"
  141.                     :on-success="handleMutipleFileUpload"
  142.                     multiple
  143.                 >
  144.                   <el-button size="small" type="success">多文件上传</el-button>
  145.                 </el-upload>
  146.                 <el-button @click="showUrls" style="margin: 10px 0" type="primary">显示链接</el-button>
  147.               </div>
  148.             </el-card>
  149.           </div>
  150.         </el-main>
  151.  
  152.       </el-container>
  153.  
  154.  
  155.     </el-container>
  156.   </div>
  157. </template>
  158.  
  159. <script>
  160. import axios from "axios";
  161. import request from '@/utils/request'
  162.  
  163. export default {
  164.   name: 'HomeView',
  165.   data() {
  166.     return {
  167.       isCollapse: false,  // 不收缩
  168.       asideWidth: '200px',
  169.       collapseIcon: 'el-icon-s-fold',
  170.       users: [],
  171.       user:JSON.parse(localStorage.getItem('honey-user')||'{}'),
  172.       url:'',
  173.       urls:[]
  174.     }
  175.   },
  176.   mounted() {
  177.     // axios.get('http://localhost:9090/user/selectall').then(res=>{
  178.     //   console.log(res.data);
  179.     //   this.users=res.data.data
  180.     // })
  181.  
  182.     request.get('/user/selectall').then(res => {
  183.       this.users = res.data
  184.     })
  185.   },
  186.   methods: {
  187.     preview(url){
  188.       window.open(url)
  189.     },
  190.     showUrls(){
  191.       console.log(this.urls)
  192.     },
  193.     handleMutipleFileUpload(response,file,fileList){
  194.       this.urls=fileList.map(v=>v.response?.data)
  195.     },
  196.     handleTableFileUpload(row,file,fileList){
  197.       console.log(row,file,fileList)
  198.       row.avatar=file.response.data
  199.       // this.$set(row,'avatar',file.response.data)
  200.       console.log(row)
  201.       request.put('/user/update',row).then(res=>{
  202.         if(res.code==='200'){
  203.           this.$message.success('上传成功')
  204.         }else{
  205.           this.$message.error(res.msg)
  206.         }
  207.       })
  208.     },
  209.     handleFileUpload(response,file,fileList){
  210.       this.fileList=fileList
  211.       console.log(response,file,fileList)
  212.     },
  213.     logout() {
  214.       localStorage.removeItem("honey-user")
  215.       this.$router.push('/login')
  216.     },
  217.     handleFull() {
  218.       document.documentElement.requestFullscreen()
  219.     },
  220.     handleCollapse() {
  221.       this.isCollapse = !this.isCollapse
  222.       this.asideWidth = this.isCollapse ? '64px' : '200px'
  223.       this.collapseIcon = this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'
  224.     }
  225.   }
  226. }
  227. </script>
  228.  
  229. <style>
  230. .el-menu--inline {
  231.   background-color: #000c17 !important;
  232. }
  233.  
  234. .el-menu--inline .el-menu-item {
  235.   background-color: #000c17 !important;
  236.   padding-left: 49px !important;
  237. }
  238.  
  239. .el-menu-item:hover, .el-submenu__title:hover {
  240.   color: #fff !important;
  241. }
  242.  
  243. .el-submenu__title:hover i {
  244.   color: #fff !important;
  245. }
  246.  
  247. .el-menu-item:hover i {
  248.   color: #fff !important;
  249. }
  250.  
  251. .el-menu-item.is-active {
  252.   background-color: #1890ff !important;
  253.   border-radius: 5px !important;
  254.   width: calc(100% - 8px);
  255.   margin-left: 4px;
  256. }
  257.  
  258. .el-menu-item.is-active i, .el-menu-item.is-active .el-tooltip {
  259.   margin-left: -4px;
  260. }
  261.  
  262. .el-menu-item {
  263.   height: 40px !important;
  264.   line-height: 40px !important;
  265. }
  266.  
  267. .el-submenu__title {
  268.   height: 40px !important;
  269.   line-height: 40px !important;
  270. }
  271.  
  272. .el-submenu .el-menu-item {
  273.   min-width: 0 !important;
  274. }
  275.  
  276. .el-menu--inline .el-menu-item.is-active {
  277.   padding-left: 45px !important;
  278. }
  279.  
  280. /*.el-submenu__icon-arrow {*/
  281. /*  margin-top: -5px;*/
  282. /*}*/
  283.  
  284. .el-aside {
  285.   transition: width .3s;
  286.   box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
  287. }
  288.  
  289. .logo-title {
  290.   margin-left: 5px;
  291.   font-size: 20px;
  292.   transition: all .3s; /* 0.3s */
  293. }
  294.  
  295. .el-header {
  296.   box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
  297.   display: flex;
  298.   align-items: center;
  299. }
  300. </style>

 最后效果：实现了单文件或者多文件上传和预览下载的功能

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/377593
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号