layui-阿里云oss上传

前端html和js

//这个是使用到的layui文件列表上传(多文件上传)

<div class="layui-upload" style="margin-left:10px; margin-right:3px">
        <button type="button" class="layui-btn layui-btn-normal" id="testList">1.选择要上传的图片</button>
         <button type="button" class="layui-btn" id="testListAction">2.点击确定开始上传</button>
        <input class="layui-upload-file" type="file" accept="undefined" name="file" multiple="">
        <div class="layui-upload-list">
            <table class="layui-table">
                <thead>
                    <tr>
                        <th>文件名</th>
                        <th>大小</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="demoList"></tbody>
            </table>
        </div>
        <button type="button" class="layui-btn layui-btn-danger" id="saveImage" style="margin-left: 37%;margin-top: 2%">保存</button>
    </div>
<script type="text/javascript">
layui.use('upload', function(){
      var $ = layui.jquery
      ,upload = layui.upload;
      var imgArray=new Array();//定义一个数组对象，用于存放上传后的图片地址，用户可能不是一次性上传所有图片

      //点击上传的时候，页面弹出一个提示框，避免用户重复点击
      $("#testListAction").click(function(){
          //配置一个透明的提示框
          layer.msg('正在上传中,请耐心等待,不要重复上传', {
            time: 3000, //3s后自动关闭
            offset: [100]
          });
      })
         //多文件列表示例，这一块是layui的上传，官网上都有
          var demoListView = $('#demoList')
          ,uploadListIns = upload.render({
            elem: '#testList'
            ,url: 'upload/filesUpload'//我的上传接口
            ,accept: 'images'//这里可以设置上传的类型限制
            ,multiple: true
            ,auto: false
            ,bindAction: '#testListAction'
            ,choose: function(obj){
              var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
              //读取本地文件
              obj.preview(function(index, file, result){
                var tr = $(['<tr id="upload-'+ index +'">'
                  ,'<td>'+ file.name +'</td>'
                  ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
                  ,'<td>等待上传</td>'
                  ,'<td>'
                    ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                    ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-show">预览图片</button>'
                    ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                  ,'</td>'
                ,'</tr>'].join(''));

                //单个重传
                tr.find('.demo-reload').on('click', function(){
                  obj.upload(index, file);
                });

                //删除
                tr.find('.demo-delete').on('click', function(){
                  delete files[index]; //删除对应的文件
                  tr.remove();
                  uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                });

                //预览图片，这里做了一个预览图片的功能，使用的是layui类型1的弹出层
                tr.find('.demo-show').on('click', function(){
                    parent.layer.open({
                          type: 1, 
                          title:'预览图片',
                          area: ['70%', '85%'],
                          content: '<div style="height:100%;text-align:center;"> <img style="height: 100%" src="' + result + '" alt="' + file.name + '"  ></div>'
                        });
                });

                demoListView.append(tr);
              });
            }
            //上传完成回调函数
            ,done: function(res, index, upload){
               var imgUrl = res.data;
              if(res.code == 0){ //上传成功
                  imgArray.push(imgUrl);//图片上传成功后，将返回的图片路径放到全局imgArray
                var tr = demoListView.find('tr#upload-'+ index)
                ,tds = tr.children();
                tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                tds.eq(3).html(''); //清空操作
                return delete this.files[index]; //删除文件队列已经上传成功的文件
              }
              this.error(index, upload);
            }
            ,error: function(index, upload){
              var tr = demoListView.find('tr#upload-'+ index)
              ,tds = tr.children();
            }
          });


//将图片路径保存到数据库。
 $("#saveImage").click(function(){
          var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
              $.ajax({
                  type:'post',
                  url:'saveImgUrl', 
                  data:{imgUrl:imgArray},
                  traditional:true,//防止深度序列化
                  success:function(data){
                      if(0==data.code){
                          layer.msg("保存成功");
                          setTimeout(function(){
                              parent.layer.close(index);
                            },1000);
                      }else{
                          layer.msg("保存失败");
                      }

                  },error:function(){
                      layer.msg("请求错误");
                  }
               }) 

      })





    }); 
</script>

后台上传接口：

        //多文件上传，利用单文件上传修改而来
        @RequestMapping("/filesUpload")
        @ResponseBody
        //requestParam要写才知道是前台的那个数组
        public String filesUpload(@RequestParam("file") MultipartFile[] files,
                HttpServletRequest request) throws IllegalStateException, IOException {
            String imgUrl = "";
            //这里的files 每次都只有一个文件，因为layui上传的时候文件是一个一个上传的
                if (files != null && files.length > 0) {
                for (int i = 0; i < files.length; i++) {
                    MultipartFile file = files[i];
                    // 保存文件
                    imgUrl = OssUtil.uploadImg(file, list);//上传到OSS，返回上传的图片地址，访问该地址就可以看见图片
                }
            }
            JSONObject res = new JSONObject();//生成一个json对象返回前端
            res.put("code", 0);
                res.put("msg", "");
                res.put("data", imgUrl);//存放图片路径
            return res.toJSONString();
        }

Oss工具类：

public class OssUtil {

    private static String ENDPOINT = "oss-cn-hangzhou.aliyuncs.com";
    private static String ACCESSKEYID = 你自己的ACCESSKEYID ;
    private static String ACCESSKEYSECRET = 你自己的ACCESSKEYSECRET ;
    private static String BUCKET = 你自己的BUCKET（根目录）;

    public static String uploadImg(MultipartFile file) throws IOException{
        String imgFileName = "img/";//保存到阿里云的文件夹名
        // Endpoint以杭州为例，其它Region请按实际情况填写。
        String endpoint = OssUtil.ENDPOINT;
        String accessKeyId = OssUtil.ACCESSKEYID;
        String accessKeySecret = OssUtil.ACCESSKEYSECRET;
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
        InputStream inputStream = file.getInputStream();
        String originName = file.getOriginalFilename();//上传的文件名
        String fileName =  imgFileName+originName;//保存路径为文件夹+文件名
        ossClient.putObject(OssUtil.BUCKET,fileName, inputStream);
    ossClient.shutdown();
        //前面的内容，阿里云文档上都有
        //上传成功后，获取文件路径+文件名； 
        String urlName = URLEncoder.encode(fileName, "UTF-8");//防止中文和特殊字符乱码
        String imgUrl =  "https://" + BUCKET+"."+ENDPOINT+ File.separator  +urlName;//返回的图片路径，oss根目录加上阿里云的ENDPOINT地址，File.separator =\
        return imgUrl;//将图片路径返回
    }


}

总结：

1.前端上传使用的是layui，使用的时候要记得引用layui的js

2.后台阿里云的ACCESSKEYID，ACCESSKEYSECRET，BUCKET，文件夹路径填写正确。

3.前端保存发起的ajax请求，可以根据需求将图片路径的数组保存到数据库。

4.前端，接口 ，OssUtil 完整一套，可以直接使用。