LayUI圖片上傳

//設置上傳按鈕
<button type="button" style="display: none" class="layui-btn layui-authority cvv66nwtu" id="nationality">上傳</button>

//設置上傳完成后的圖片回顯框
<div class="layui-upload-list">
    <img class="bigImg layui-upload-img" style="height: 160px;width: 250px" id="nationalityimg">
    <p id="nationalityText"></p>
</div>

//文件上傳
var posterWidth = 1024, posterHeight = 768;
layui.upload.render({ //默認發post請求
    elem: '#nationality'
    ,data:{"shipId":ship.id,"sequence":"0"}
    , url:config.base_server+'squid/ydShip/upoldImgUpload'
    , exts: 'jpg|png|jpeg'
    , size: 200//圖片大小必須為200kb
    , drag: true
    , auto: false //表示不自動上傳
    ,bindAction:'#bcbtn2'//指定和誰一起上傳
    , choose: function(obj) {
        obj.preview(function(index, file, result) {//index索引 file 文件名.后綴  result 圖片數據
            var img = new Image();
            img.onload = function() {
                    $('#nationalityimg').attr('src', result); //圖片鏈接（base64）不支持ie8
                    obj.upload(index, file);
            };
            img.src = result;
        });
    }
    , before: function(obj) { //圖片預覽事件
        layer.load();
    }
    , done: function(res) { //上傳成功發生成的事件
        layer.closeAll('loading');
        if (res.code > 0) {
            return layer.msg(res.msg);
        }
    }
    , error: function() {//上傳失敗的事件
        layer.closeAll('loading');
        layer.alert('上傳失敗，請重試！');
    }
});

 

//后台部分

@ApiOperation(value = "上傳照片照", notes = "")
@ApiImplicitParams({
        @ApiImplicitParam(name = "token", value = "令牌", required = true, dataType = "String"),
})
@PostMapping("/upoldImgUpload")
public Result addlicenseImgUpload(MultipartFile file) throws Exception {
    String s = ydShipService.addimportShip(file);
    if(s!=null){
        return Result.success(s);
    }else {
        return Result.failure(ResultCode.ERROR);
    }
}

/**
 * 上傳圖片
 */
public String addimportShip(MultipartFile file) throws Exception {
　　
　　//得到上傳服務器地址
    FastFileStorageClient storageClient = upLoadingService.getStorageClient();

    String myFileName = file.getOriginalFilename();// 文件原名稱
    String fileName = UUID.randomUUID() + myFileName.substring(myFileName.lastIndexOf("."));//得到名
    StorePath storePath = storageClient.uploadFile(file.getBytes(), fileName);

　　　//得到group 和path 用於從服務器下載上傳的圖片
　　　String group = storePath.getGroup();
　　　String path = storePath.getPath();

    byte[] theTytes = storageClient.downloadFile(group, path);//String groupName, String path
    BASE64Encoder base64Encoder = new BASE64Encoder();
    String encode = base64Encoder.encode(theTytes);
    return encode;
}

//獲得文件服務器地址
public FastFileStorageClient getStorageClient() {
　　　　　//初始化連接池
　　　　FdfsConnectionPool pool = new FdfsConnectionPool();
　　　　// 設置tracker
　　　　List<String> trackers = Arrays.asList("服務器地址", "服務器地址");
　　　　TrackerConnectionManager tcm = new TrackerConnectionManager(pool, trackers);
　　　　TrackerClient trackerClient = new DefaultTrackerClient(tcm);
　　　　// 得到storage客戶端
　　　　ConnectionManager cm = new ConnectionManager(pool);
　　　　FastFileStorageClient storageClient = new DefaultFastFileStorageClient(trackerClient, cm);
　　　　return storageClient;
　}

 

 導入時出現一個轉的圈表示正在上傳或導入

        在...之前事件
        before:function(){
           
            layer.msg('數據導入中...',{icon:16,shade:0.01,time:0});
        
        }