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<String,Object> fileUpload(@RequestParam("file") MultipartFile multipartFile, HttpServletRequest request){
        Map<String,Object> 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