[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-public-msAf9SFh":3,"public-project-articles-msAf9SFh":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},66,"msAf9SFh",38,"09. 开发文件上传功能","\n## 先创建FileController，完成文件上传的接口\n\n```java\npackage com.example.controller;\n\nimport cn.hutool.core.io.FileUtil;\nimport com.example.common.Result;\nimport jakarta.servlet.ServletOutputStream;\nimport jakarta.servlet.http.HttpServletResponse;\nimport org.springframework.web.bind.annotation.*;\nimport org.springframework.web.multipart.MultipartFile;\n\nimport java.io.File;\nimport java.io.IOException;\nimport java.net.URLEncoder;\nimport java.nio.charset.StandardCharsets;\n\n@RestController\n@RequestMapping(\"\u002Ffiles\")\npublic class FileController {\n\n    \u002F\u002F 表示本地磁盘文件的存储路径  D:\\知识星球\\项目训练营\\项目\\在线点餐系统\\脚手架\\canteen\\files\\\n    private static final String filePath = System.getProperty(\"user.dir\") + \"\u002Ffiles\u002F\";\n\n    \u002F**\n     * 文件上传\n     *\u002F\n    @PostMapping(\"\u002Fupload\")\n    public Result upload(MultipartFile file) throws IOException {\n        if (!FileUtil.exist(filePath)) {\n            FileUtil.mkdir(filePath);\n        }\n        \u002F\u002F 文件的原始名称\n        String originalFilename = file.getOriginalFilename();\n        String realFilePath = filePath + originalFilename;\n        if (FileUtil.exist(realFilePath)) {  \u002F\u002F 同名文件已存在   123.jpg =>  123_123123123124141.jpg\n            originalFilename = FileUtil.mainName(originalFilename) + \"_\" + System.currentTimeMillis()\n                    + \".\" + FileUtil.extName(originalFilename);\n            realFilePath = filePath + originalFilename;\n        }\n        File localFile = new File(realFilePath);\n        file.transferTo(localFile);\n        String url = \"http:\u002F\u002Flocalhost:9090\u002Ffiles\u002Fdownload\u002F\" + originalFilename;\n        return Result.success(url);\n    }\n\n    \u002F**\n     * 文件下载\n     *\u002F\n    @GetMapping(\"\u002Fdownload\u002F{fileName}\")\n    public void download(@PathVariable String fileName, HttpServletResponse response) throws IOException {\n        response.setHeader(\"Content-Disposition\", \"attachment;filename=\" + URLEncoder.encode(fileName, StandardCharsets.UTF_8));\n        String realFilePath = filePath + fileName;\n        byte[] bytes = FileUtil.readBytes(realFilePath);\n        ServletOutputStream os = response.getOutputStream();\n        os.write(bytes);\n        os.flush();\n        os.close();\n    }\n\n}\n\n```\n\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1708482356591-1c938f25-b3b4-42c0-99b1-fbad599929fc.png#averageHue=%23312f2e&clientId=u84201af1-8d2f-4&from=paste&height=421&id=u5cbba364&originHeight=526&originWidth=1746&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=199081&status=done&style=none&taskId=u29e74244-ed4e-4983-8fa9-e47ce57db9e&title=&width=1396.8)\n这个错误是告诉你上传的文件夹不存在，需要新建，可以通过程序去创建文件夹\n\n## 完成Vue的文件上传组件，并把文件路径存储到数据库，在表格里可以显示图片\n\n```vue\n\u003Cel-upload action=\"http:\u002F\u002Flocalhost:9090\u002Ffiles\u002Fupload\" :on-success=\"handleFileUpload\">\n  \u003Cel-button type=\"primary\">点击上传\u003C\u002Fel-button>\n\u003C\u002Fel-upload>\n\nconst handleFileUpload = (file) => {\n  data.form.avatar = file.data\n}\n```\n\n```vue\n\u003Cel-table-column prop=\"avatar\" label=\"头像\">\n  \u003Ctemplate v-slot=\"scope\">\n    \u003Cimg v-if=\"scope.row.avatar\" :src=\"scope.row.avatar\" alt=\"\" style=\"width: 50px; height: 50px; border-radius: 50%\">\n  \u003C\u002Ftemplate>\n\u003C\u002Fel-table-column>\n```","coding",1,659,110,"2024-04-16 02:29:09","2026-05-03 22:49:02","SpringBoot3+Vue3的在线点餐系统","online-ordering",{"project":18,"items":19},{"id":6,"title":15,"slug":16},[20,27,34,41,48,55,62,69,76,77,84,91,98,105,112,119],{"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},58,"JOJVoOQd","01. 在线点餐系统介绍",2745,102,"2025-01-09 09:49:39",{"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},59,"Tt7tzqbb","02. 脚手架介绍",2364,103,"2025-01-09 09:54:51",{"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":14,"project_title":15,"project_slug":16},60,"h74qSg8n","03. 开发登录功能",1974,104,"2024-04-16 02:30:00",{"id":42,"uuid":43,"project_id":6,"title":44,"type":9,"status":10,"public_enabled":10,"views":45,"sort":46,"created_at":47,"updated_at":14,"project_title":15,"project_slug":16},61,"uv8MFWZg","04. 开发后台登录接口",1729,105,"2024-04-16 02:29:56",{"id":49,"uuid":50,"project_id":6,"title":51,"type":9,"status":10,"public_enabled":10,"views":52,"sort":53,"created_at":54,"updated_at":14,"project_title":15,"project_slug":16},62,"jd2xjxUG","05. 开发普通用户登录功能",1145,106,"2024-04-16 02:29:27",{"id":56,"uuid":57,"project_id":6,"title":58,"type":9,"status":10,"public_enabled":10,"views":59,"sort":60,"created_at":61,"updated_at":14,"project_title":15,"project_slug":16},63,"TnvWfP4t","06. 开发普通用户注册功能",861,107,"2024-04-16 02:29:23",{"id":63,"uuid":64,"project_id":6,"title":65,"type":9,"status":10,"public_enabled":10,"views":66,"sort":67,"created_at":68,"updated_at":14,"project_title":15,"project_slug":16},64,"j9QNZGZU","07. 开发管理员后台接口",873,108,"2024-04-16 02:29:17",{"id":70,"uuid":71,"project_id":6,"title":72,"type":9,"status":10,"public_enabled":10,"views":73,"sort":74,"created_at":75,"updated_at":14,"project_title":15,"project_slug":16},65,"Sle0aiDs","08. 开发管理员管理页面并对接后台接口",821,109,"2024-04-16 02:29:13",{"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":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},67,"8FBiQ4ue","10. 个人资料管理",736,111,"2024-04-16 02:29:06",{"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},252,"hi7dGSTj","11. 顾客信息管理",643,431,"2024-06-20 15:59:16",{"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},253,"2vquH0pr","12. 餐桌管理",879,432,"2024-06-03 22:12:16",{"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},254,"F8DqfdBe","13. 开发餐品管理功能.",731,433,"2024-06-03 22:12:43",{"id":106,"uuid":107,"project_id":6,"title":108,"type":9,"status":10,"public_enabled":10,"views":109,"sort":110,"created_at":111,"updated_at":14,"project_title":15,"project_slug":16},275,"G20uzwaW","14. 开发在线点餐功能（一）",768,467,"2024-06-27 12:21:02",{"id":113,"uuid":114,"project_id":6,"title":115,"type":9,"status":10,"public_enabled":10,"views":116,"sort":117,"created_at":118,"updated_at":14,"project_title":15,"project_slug":16},276,"0bl3zvbT","15. 开发在线点餐功能（二）",609,468,"2024-06-27 12:21:30",{"id":120,"uuid":121,"project_id":6,"title":122,"type":9,"status":10,"public_enabled":10,"views":123,"sort":124,"created_at":125,"updated_at":14,"project_title":15,"project_slug":16},277,"AUgPvs9x","16. 开发在线点餐功能（三）",716,469,"2024-06-27 12:22:01"]