[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-public-FxHR3hNR":3,"public-project-articles-FxHR3hNR":17},{"id":4,"uuid":5,"project_id":6,"title":7,"content":8,"type":9,"status":10,"public_enabled":10,"views":11,"sort":12,"created_at":13,"updated_at":14,"project_title":15,"project_slug":16},542,"FxHR3hNR",47,"13. SpringBoot3+Vue3实现文件上传下载功能","## 文件上传\n\n\u002F\u002F System.getProperty(\"user.dir\")  获取到你当前这个项目的根路径\n\n\u002F\u002F 文件上传的目录的路径\n\n```vue\nprivate static final String filePath = System.getProperty(\"user.dir\") + \"\u002Ffiles\u002F\";\n```\n\n```java\n\u002F**\n * 文件上传\n *\u002F\n@PostMapping(\"\u002Fupload\")\npublic Result upload(MultipartFile file) {   \u002F\u002F 文件流的形式接收前端发送过来的文件\n    String originalFilename = file.getOriginalFilename();  \u002F\u002F xxx.png\n    if (!FileUtil.isDirectory(filePath)) {  \u002F\u002F 如果目录不存在 需要先创建目录\n        FileUtil.mkdir(filePath);  \u002F\u002F 创建一个 files 目录\n    }\n    \u002F\u002F 提供文件存储的完整的路径\n    \u002F\u002F 给文件名 加一个唯一的标识\n    String fileName = System.currentTimeMillis() + \"_\" + originalFilename;  \u002F\u002F 156723232322_xxx.png\n    String realPath = filePath + fileName;   \u002F\u002F 完整的文件路径\n    try {\n        FileUtil.writeBytes(file.getBytes(), realPath);\n    } catch (IOException e) {\n        e.printStackTrace();\n        throw new CustomException(\"500\", \"文件上传失败\");\n    }\n    \u002F\u002F 返回一个网络连接\n    \u002F\u002F http:\u002F\u002Flocalhost:9090\u002Ffiles\u002Fdownload\u002Fxxxx.jpg\n    String url = \"http:\u002F\u002Flocalhost:9090\u002Ffiles\u002Fdownload\u002F\" + fileName;\n    return Result.success(url);\n}\n```\n\n## 文件下载 \n\n```java\nresponse.addHeader(\"Content-Disposition\", \"attachment;filename=\" + URLEncoder.encode(fileName, StandardCharsets.UTF_8));\nresponse.setContentType(\"application\u002Foctet-stream\");\n```\n\n```java\n\u002F**\n * 文件下载\n *\u002F\n@GetMapping(\"\u002Fdownload\u002F{fileName}\")\npublic void download(@PathVariable String fileName, HttpServletResponse response) {\n    try {\n        response.addHeader(\"Content-Disposition\", \"attachment;filename=\" + URLEncoder.encode(fileName, StandardCharsets.UTF_8));\n        response.setContentType(\"application\u002Foctet-stream\");\n        OutputStream os = response.getOutputStream();\n        String realPath = filePath + fileName;   \u002F\u002F 完整的文件路径：http:\u002F\u002Flocalhost:9090\u002Ffiles\u002Fdownload\u002F1729672708145_123.jpg\n        \u002F\u002F 获取到文件的字节数组\n        byte[] bytes = FileUtil.readBytes(realPath);\n        os.write(bytes);\n        os.flush();\n        os.close();\n    } catch (IOException e) {\n        e.printStackTrace();\n        throw new CustomException(\"500\", \"文件下载失败\");\n    }\n}\n```\n\n## 前端对接文件上传和下载\n\n用户头像\n\nupload 组件\n\n```vue\n\u003Cdiv style=\"width: 100%; display: flex; justify-content: center; margin-bottom: 20px\">\n  \u003Cel-upload\n      class=\"avatar-uploader\"\n      action=\"http:\u002F\u002Flocalhost:9090\u002Ffiles\u002Fupload\"\n      :show-file-list=\"false\"\n      :on-success=\"handleAvatarSuccess\"\n  >\n    \u003Cimg v-if=\"data.form.avatar\" :src=\"data.form.avatar\" class=\"avatar\" \u002F>\n    \u003Cel-icon v-else class=\"avatar-uploader-icon\">\u003CPlus \u002F>\u003C\u002Fel-icon>\n  \u003C\u002Fel-upload>\n\u003C\u002Fdiv>\n```\n\n回调函数\n\n```vue\nconst handleAvatarSuccess = (res) => {\n  data.form.avatar = res.data\n}\n```\n\n## 表格里面显示图片\n\n```vue\n\u003Cel-table-column label=\"头像\">\n  \u003Ctemplate #default=\"scope\">\n    \u003Cimg v-if=\"scope.row.avatar\" :src=\"scope.row.avatar\" alt=\"\" style=\"display: block; width: 40px; height: 40px; border-radius: 50%\" \u002F>\n  \u003C\u002Ftemplate>\n\u003C\u002Fel-table-column>\n```\n\n## 上传头像\n\n```vue\n\u003Cel-form-item label=\"头像\">\n  \u003Cel-upload\n      action=\"http:\u002F\u002Flocalhost:9090\u002Ffiles\u002Fupload\"\n      list-type=\"picture\"\n      :on-success=\"handleAvatarSuccess\"\n  >\n    \u003Cel-button type=\"primary\">上传头像\u003C\u002Fel-button>\n  \u003C\u002Fel-upload>\n\u003C\u002Fel-form-item>\n\nconst handleAvatarSuccess = (res) => {\n  data.form.avatar = res.data\n}\n```\n\n","coding",1,4489,1057,"2024-10-23 17:31:02","2026-05-03 22:49:02","1天学会SpringBoot3+Vue3实战项目开发","learn-springboot-vue",{"project":18,"items":19},{"id":6,"title":15,"slug":16},[20,27,34,42,49,56,63,70,77,84,91,98,105,106,113,120],{"id":21,"uuid":22,"project_id":6,"title":23,"type":9,"status":10,"public_enabled":10,"views":24,"sort":25,"created_at":26,"updated_at":14,"project_title":15,"project_slug":16},475,"OgrBbww7","01. 1天学会SpringBoot3+Vue3实战项目课程介绍",17862,910,"2024-10-11 16:50:50",{"id":28,"uuid":29,"project_id":6,"title":30,"type":9,"status":10,"public_enabled":10,"views":31,"sort":32,"created_at":33,"updated_at":14,"project_title":15,"project_slug":16},476,"U58ISSFR","02. 从0带你搭建Vue3工程",12899,911,"2024-10-11 16:47:49",{"id":35,"uuid":36,"project_id":6,"title":37,"type":9,"status":10,"public_enabled":10,"views":38,"sort":39,"created_at":40,"updated_at":41,"project_title":15,"project_slug":16},478,"tK3YUYq8","03. Vue3集成Element-Plus",9899,919,"2024-10-14 22:18:17","2026-05-07 15:33:28.189425+00",{"id":43,"uuid":44,"project_id":6,"title":45,"type":9,"status":10,"public_enabled":10,"views":46,"sort":47,"created_at":48,"updated_at":14,"project_title":15,"project_slug":16},488,"J2MV6UAG","04. Element-Plus组件使用速成",8093,938,"2024-10-11 16:49:40",{"id":50,"uuid":51,"project_id":6,"title":52,"type":9,"status":10,"public_enabled":10,"views":53,"sort":54,"created_at":55,"updated_at":14,"project_title":15,"project_slug":16},489,"zGi4XJsb","05. Vue3集成Vue-Router实现路由跳转",7443,939,"2024-10-12 15:44:41",{"id":57,"uuid":58,"project_id":6,"title":59,"type":9,"status":10,"public_enabled":10,"views":60,"sort":61,"created_at":62,"updated_at":14,"project_title":15,"project_slug":16},499,"cwsTdvo9","06. Vue3搭建后台管理系统",7421,964,"2024-10-14 16:02:49",{"id":64,"uuid":65,"project_id":6,"title":66,"type":9,"status":10,"public_enabled":10,"views":67,"sort":68,"created_at":69,"updated_at":14,"project_title":15,"project_slug":16},501,"JlXltpKA","07. Mysql语法简介（速成）",5208,973,"2024-10-15 16:52:18",{"id":71,"uuid":72,"project_id":6,"title":73,"type":9,"status":10,"public_enabled":10,"views":74,"sort":75,"created_at":76,"updated_at":14,"project_title":15,"project_slug":16},509,"c3XrOTcU","08. 从0带你搭建SpringBoot3工程",9397,992,"2024-10-16 15:43:13",{"id":78,"uuid":79,"project_id":6,"title":80,"type":9,"status":10,"public_enabled":10,"views":81,"sort":82,"created_at":83,"updated_at":14,"project_title":15,"project_slug":16},516,"QsKwbDX7","09. SpringBoot3集成Mybatis",10348,1004,"2024-10-17 16:36:15",{"id":85,"uuid":86,"project_id":6,"title":87,"type":9,"status":10,"public_enabled":10,"views":88,"sort":89,"created_at":90,"updated_at":14,"project_title":15,"project_slug":16},519,"qKG13ySo","10. SpringBoot3+Vue3实现基本的增删改查功能",9572,1013,"2024-10-18 16:34:55",{"id":92,"uuid":93,"project_id":6,"title":94,"type":9,"status":10,"public_enabled":10,"views":95,"sort":96,"created_at":97,"updated_at":14,"project_title":15,"project_slug":16},527,"7uED9n7e","11. Vue3开发登录注册页面",7106,1031,"2024-10-21 17:35:30",{"id":99,"uuid":100,"project_id":6,"title":101,"type":9,"status":10,"public_enabled":10,"views":102,"sort":103,"created_at":104,"updated_at":14,"project_title":15,"project_slug":16},535,"poUfWrWc","12. Vue3管理系统开发个人信息、修改密码页面",5777,1050,"2024-10-22 17:50:30",{"id":4,"uuid":5,"project_id":6,"title":7,"type":9,"status":10,"public_enabled":10,"views":11,"sort":12,"created_at":13,"updated_at":14,"project_title":15,"project_slug":16},{"id":107,"uuid":108,"project_id":6,"title":109,"type":9,"status":10,"public_enabled":10,"views":110,"sort":111,"created_at":112,"updated_at":14,"project_title":15,"project_slug":16},548,"VPZNSTxr","14. SpringBoot3+Vue3实现富文本编辑器功能",3931,1072,"2024-10-24 17:38:21",{"id":114,"uuid":115,"project_id":6,"title":116,"type":9,"status":10,"public_enabled":10,"views":117,"sort":118,"created_at":119,"updated_at":14,"project_title":15,"project_slug":16},555,"nal0yVxM","15. SpringBoot3+Vue3实现数据批量导入导出功能",3577,1090,"2024-10-28 17:39:21",{"id":121,"uuid":122,"project_id":6,"title":123,"type":9,"status":10,"public_enabled":10,"views":124,"sort":125,"created_at":126,"updated_at":14,"project_title":15,"project_slug":16},564,"XxSPPFGi","16. SpringBoot3+Vue3实现数据统计图表功能",4236,1109,"2025-01-09 09:40:57"]