5分钟教会iview UI和 Element UI 简单文件上传和回显功能
项目结构：SpringBoot + Vue + iview UI/Element UI
目录
项目结构：SpringBoot + Vue + iview UI/Element UI
后端接口：
iview UI 前端文件上传代码：
iview效果：
Element UI 前端文件上传代码
Element效果
点击文件名后效果
后端接口：
@RestController
public class FileUploadController {SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/dd/");@RequestMapping("/fileUpload")public Map fileUpload(@RequestParam("file") MultipartFile multipartFile, HttpServletRequest request){Map result =new HashMap<>();String fileName = multipartFile.getOriginalFilename();if(!fileName.endsWith(".jpeg")){result.put("status","ERROR");result.put("msg","文件类型上传有误");return result;}String format = sdf.format(new Date());String realPath = request.getServletContext().getRealPath("/") + format;//项目路径File folder = new File(realPath);if(!folder.exists()){folder.mkdirs();}String newName = UUID.randomUUID().toString()+".jpeg";try {multipartFile.transferTo(new File(folder,newName));String url = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+format+newName;result.put("status","success");result.put("url",url);} catch (IOException e) {e.printStackTrace();result.put("status","ERROR");result.put("msg","文件类型上传有误");}return result;}} iview UI 前端文件上传代码：
iview UI文件上传
Click or drag files here to upload
iview效果：
Element UI 前端文件上传代码
Element UI文件上传
将文件拖到此处，或点击上传只能上传jpg/png文件，且不超过500kb
Element效果
点击文件名后效果
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！