Vue上传文件
上传效果
上传类型
- 这里的文件暂定义为:doc、docx、rar、zip、pdf、txt【这个可以自己定义,后台进行判断即可】
用到的框架及标签
- 框架element
- 标签el-upload
关键代码
- 上传标签代码
<el-upload class="avatar-uploader" action="/peng/addFile" :on-success="handleAvatarFileSuccess" :on-error="handleAvatarFileError" :before-upload="beforeAvatarFileUpload" limit="1"> <el-button size="small" type="primary">点击上传</el-button> </el-upload>
-
对应的js方法代码
handleAvatarFileError: function (err, file) { alert("文件上传走丢了。。"); }, handleAvatarFileSuccess: function (res, file) { this.$message.success("上传文件成功!"); }, beforeAvatarFileUpload: function (file) { //限制的上限为10M const isLt10M = file.size / 1024 / 1024 < 10; if (!isLt10M) { this.$message.error('上传文件大小不能超过 10MB!'); } return isLt10M; }
后台接收上传文件的代码
-
关键部分
@RequestMapping("/addFile") @ResponseBody public Result addFile(@RequestBody MultipartFile file, HttpServletRequest request, HttpServletResponse response) throws Exception { Result res = new Result(); String trueFileName = null; if (file != null) { String path = null;// 文件路径 String fileType = null;//文件类型 String fileName = file.getOriginalFilename();// 原文件名称 // 判断图片类型 fileType = fileName.indexOf(".") != -1 ? fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length()) : null; if (fileType != null) { if ("DOC".equals(fileType.toUpperCase()) || "DOCX".equals(fileType.toUpperCase()) || "RAR".equals(fileType.toUpperCase()) || "ZIP".equals(fileType.toUpperCase()) || "PDF".equals(fileType.toUpperCase()) || "TXT".equals(fileType.toUpperCase())) { String realPath = "/file" + File.separator; //文件命名【随机24位+时间秒的后8位】【添加了后缀】 trueFileName = StringUtils.getRandomString(24) + "" + TimeUtils.getUnixTimeLast8() + "." + fileType; // 设置文件存放的路径 path = realPath + trueFileName; // 转存文件到指定路径 file.transferTo(new File(path)); } else { res.setCode(ConfigData.CODE_PARAMETER_ERROR); res.setMsg("上传的文件非DOC、DOCX、RAR、ZIP、PDF、TXT格式!"); return res; } } else { res.setCode(ConfigData.CODE_PARAMETER_ERROR); res.setMsg("文件类型不正确!"); return res; } } else { res.setCode(ConfigData.CODE_PARAMETER_ERROR); res.setMsg("上传的文件为空!"); return res; } Map<String, Object> obj = new HashMap<String, Object>(); obj.put("fileName", trueFileName); res.setMsg("上传成功!"); res.setObj(obj); return res; }