整理下最近的笔记


由于最近项目需求要做一个图片上传和视频上传,填了不少坑,所有写下这篇记录,方便之后快速开发。文件上传前端组件使用了layui的upload,layui的组件好看且方便用,但是有部分功能不完善,希望以后越来越好吧。正文直接上代码。

  1. 先配置文件上传路径:
# 自定义路径图片存放路径:
web:
    file-path:  /home/software/server/yingyu_app/file
# 用于静态资源的路径模式。
    mvc:
      static-path-pattern: /**
    resources:
      static-locations: file:${web.file-path}
2.在cortroller层:
#获取配置文件的路径:
     @Value("${web.file-path}")
     private String filePath;
3.由于layui组件要求返回的格式是json,所有将file存在map.
  设计思路:在上传文件时,自动追加一个文件夹,方便后期更改文件存放路径以及后端页面展示图片的时候不会404.
  public  Map<String,Object> getImgurl(@RequestParam("file") MultipartFile file) throws IOException {
     String uuid = UUID.randomUUID().toString();//利用uuid生成随机的文件名
     String filename=file.getOriginalFilename();//获取原本的file名
     String fNmae=filename.substring(filename.lastIndexOf(".") + 1);
     File files= new File(filePath+"/img",uuid+'.'+fNmae);//拼接文件名  在原路径下拼接一个img文件夹
     if(!files.getParentFile().exists()){//文件是否存在
        files.getParentFile().mkdir();
     }
     //存入目标文档
     file.transferTo(files);
     String fileurl=files.toString();//这里的fiels是object类型 所以tostring
     int namefile =fileurl.lastIndexOf("/");
     String url= fileurl.substring(namefile -4);//截取文件名 方便存入数据库和前端页面进行展示 例如 /img/dshjshdas-232-23213.png
     Map<String,Object> map=new HashMap<>();
     map.put("url",url); //存入map
     return map; //注意此功能存入数据表的路径是相对路径。
 }
4.以下是layui的代码,异步上传 上传之后预览此图。
layui.use('upload', function(){
    var upload = layui.upload;
    //执行实例
    var uploadInst = upload.render({
        elem: '#fileupload' //绑定元素
        ,url: //上传接口
        ,accept:'images'//声明上传类型
        ,acceptMime: 'image/*'//只显示图片文件
        ,exts:'jpg|png|gif|bmp|jpeg' //上传文件后缀
        ,method:'POST'
        ,before : function(obj){//上传之前
         layer.load(1); //增加一个loading 并禁用上传按钮
         }, choose: function(obj){
          //将每次选择的文件追加到文件队列
         var files = obj.pushFile();
          //预读本地文件,如果是多文件,则会遍历。(不支持ie8/9)
         obj.preview(function(index, file, result){
         $('#demo1').attr('width', 200)
         $('#demo1').attr('heigth', 200)
         $('#demo1').attr('src', result); //图片链接(base64)
       });
     }
     ,done: function(res){
        //成功的回调
      layer.closeAll('loading');//关闭loading
     }
    ,error: function(){
    //请求异常回调
   }
  });
});

			

声明:一个程序员|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - 整理下最近的笔记


做我喜欢做的事