Js中使用formData实现文件表单的上传

Layui中表单和文件上传 使用formdata

在layui中同时将表单数据和上传的图片路径添加至数据库中的具体方法如下:

1. HTML代码如下 (省略了点)

   <form class="layui-form" id="fm" enctype="multipart/form-data">
   
   <div class="layui-form-item">
   <label class="layui-form-label required">编号</label>
   <div class="layui-input-block">
   <input type="text" name="petNumber" lay-verify="required" lay-reqtext="宠物编号不能为空" placeholder="请输入宠物编号" value="" class="layui-input" style="width: 80%">
   <tip>请为宠物填写一个喜欢的编号。</tip>
   </div>
   </div>
   
   <div class="layui-form-item">
   <label class="layui-form-label required">该宠物的照片</label>
   <div class="layui-input-block" style="width:300px;">
   <input class="layui-btn layui-btn-radius layui-btn-normal" lay-verify="required" type="file" id="imageFile" name="imageFile" />
   </div>
   </div>
   
   <div class="layui-form-item">
   <div class="layui-input-block">
   <button class="layui-btn layui-btn-radius layui-btn-warm" lay-submit lay-filter="saveBtn">确认保存</button>
   </div>
   </div>
   </form>
   

   

   (虽然有点丑) 💮

2. JS代码

   layui.use(['form'], function () {
   var form = layui.form,
   layer = layui.layer,
   $ = layui.$;
   
   //监听提交
   form.on('submit(saveBtn)', function (data) {
   var formData = new FormData($( "#fm" )[0]);
   console.info(formData);
   var saveLoading = parent.layer.msg('数据提交中，请稍候',{icon: 16,time:false,shade:0.8});
   $.ajax({
   url:"/save",
   type:"POST",
   async: true,
   cache:false,
   contentType: false,
   processData: false,
   data:formData,
   success : function(data) {
   parent.layer.close(saveLoading);
   if(data.code==200){
   layer.msg("添加成功",{
   icon:6,
   time:1000
   },function (){
   parent.window.location.reload(); //重新加载页面
   var iframeIndex = parent.layer.getFrameIndex(window.name);
   parent.layer.close(iframeIndex);
   });
   }else {
   layer.msg("添加失败",{icon: 5,time:1000});
   }
   }
   });
   return false;
   });
   
   });
   

3. Controller代码

   @RequestMapping("/save")
   @ResponseBody
   public R save(Pets pets, @RequestParam("imageFile")MultipartFile file, HttpServletRequest request)throws Exception {
       //System.out.println(file);
       JSONObject json = new JSONObject();
       if (!file.isEmpty()) {
           String filePath = "E:/idea/springBoot/pet_adoption/src/main/resources/static/picture/";//上传到这个文件夹
           java.io.File file1 = new java.io.File(filePath);
           if (!file1.exists()) {
               file1.mkdirs();
           }
           // 获取图片的名字
           String fileName = file.getOriginalFilename();
   
           // 防止图片名字相同而出现bug，使用 uuid 加密
           String hToken = UUID.randomUUID().toString();
   
           // 加密后的图片名字：uuid + 图片名字
           String HeadName = hToken + fileName;
   
           //System.err.println("HeadName" + HeadName);
   
           String finalFilePath = filePath + HeadName;
           pets.setPetPictures(finalFilePath);
   
           java.io.File desFile = new File(finalFilePath);
           if (desFile.exists()) {
               desFile.delete();
           }
           try {
               file.transferTo(desFile);
               pets.setPetPictures(HeadName);
   
   
               json.put("code", 0);
           } catch (Exception e) {
               System.out.println(e.getMessage());
               json.put("code", 1);
           }
       }
       pets.setPetsTime(new Date());
       petsService.addPets(pets);
       return R.ok();
   
   }
   

   感觉写的挺乱的,如果有什么简单号理解的 告诉我哈~ 🙂

上传图片需要重新部署后显示的问题

//解决springboot上传图片后无法立即访问需重启的问题
//  /picture/** 是图片存放的相对路径  file:.....是本地图片的绝对路径
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    //System.out.println("配置文件已经生效");
    registry.addResourceHandler("/picture/**")
        .addResourceLocations("file:E:\\idea\\springBoot\\pet_adoption\\src\\main\\resources\\static\\picture\\");
}