189 8069 5689

  commons-fileupload
  commons-fileupload
  1.3.1


  commons-io
  commons-io
  2.4

  logo
  
    
      选择logo
    
    
      
      
    
    开始上传
    
    
  

上图中input和img的目的是为了可以接收返回值，从而在提交时可以将图片信息上传到后台

  //上传logo
  layui.use('upload', function(){
    var $ = layui.jquery,
    upload = layui.upload;

    //选完文件后不自动上传
    upload.render({
      elem: '#uploadLogo',
      url: '${ctx}/upload/uploadLogoToServer.do',
      auto: false,
      //multiple: true,
      choose: function(obj){
        console.log(obj)
        //预读本地文件示例，不支持ie8
        obj.preview(function(index, file, result){
          $('#upload-logo').attr('src', result); //图片链接（base64）
          $("#img_url").attr('value',result);
        });
      },
      bindAction: '#submit_logo',
      done: function(res){
        $("#logoText").attr('value',res.url);
        console.log(res)
        return layer.msg(res.msg,{icon: res.status,time: 2000});
      }
    });

  //上传图片
    var fileCount = 0;//控制文件数量
    var maxFileCount = 2;//文件上传大数量，如果没有限制上传文件的数量则不需要
    var maxFileSize = 20;//文件上传大大小
    var resultValue = 0;
    var url = "";
    upload.render({
      elem: '#uploadImage',
      url: '${ctx}/upload/uploadImageToServer.do',
      auto: false,
      //multiple: true,
      choose: function(obj){
        var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
        //layer.load();
        console.log(obj)
        //预读本地文件示例，不支持ie8
        obj.preview(function(index, file, result){
          fileCount++;
          if(fileCount>maxFileCount){
            fileCount = maxFileCount;
            layer.msg('文件数量不得超过'+maxFileCount+'个',{icon:2});
            return;
          }
          //在当前ID为“imageView”的区域显示图片
          $('#imageView').append('')
        });
      },
      bindAction: '#submit_image',
      done: function(res){
        if(resultValue < 2){
          url = url + res.url + ",";
        }
        if(resultValue == 1){
          $("#imageText").attr('value',url);
        }
        resultValue++;
        console.log(res)
        return layer.msg(res.msg,{icon: res.status,time: 2000});
      }
    });
  });

4、因为layui在上传多张图片的时候是通过多次请求传递过去，所以是数据是一条一条的接收的，如果你需要回显，那么就需要在后台进行拼接，不拼接很可能会出现只传返回一张图片的信息

UploadCollect

@RequestMapping(value = "/uploadImageToServer.do")
@ResponseBody
public ResultMsg insertImageToEducational(@RequestParam(value = "file")MultipartFile[] files) throws Exception {
  ResultMsg msg = new ResultMsg();
  String url = "";
  for (int i=0,length = files.length; i < length; i++) {
    if(files[i] != null && !files[i].isEmpty()) {
      //获取路径，路径我写的是固定路径，直接映射到服务器根目录下的/usr/Images/logo
      String upload_path = IMAGE_ROOT_URL;
      String upload_fileName = FileUpload.uploadFile(files[i], upload_path);
      msg.setStatus(0);
      url = url + upload_fileName;
    }else {
      msg.setStatus(1);
      msg.setMsg("上传失败");
      msg.setUrl("给一个失败的图片路径");
      return msg;
    }
  }
  msg.setStatus(1);
  msg.setMsg("上传成功");
  msg.setUrl(url);
  return msg;

}

FileUpload

public static String uploadFile(MultipartFile multipartFile, String path) throws Exception {
  File file = new File(path);
  if (!file.exists()) {
    file.mkdirs();
  }
  FileInputStream fileInputStream = (FileInputStream) multipartFile.getInputStream();
  String fileName = UUID.randomUUID() + multipartFile.getOriginalFilename();
  BufferedOutputStream bos = new BufferedOutputStream(new FileOutputStream(path + File.separator + fileName));
  byte[] bs = new byte[1024];
  int len;
  while ((len = fileInputStream.read(bs)) != -1) {
    bos.write(bs, 0, len);
  }
  bos.flush();
  bos.close();
  return fileName;
}

5、这就是图片上传的步骤

看完了这篇文章，相信你对“layui如何上传图片到服务器的非项目目录下”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！