• 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; 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});
            
            }                    


  • 相关阅读:
    tf.function :图执行模式(转载)
    TFRecord:TensorFlow 数据集存储格式(转载)
    tf.keras.Model和tf.keras.Sequential
    tf.keras.Input
    IOS逆向-砸壳笔记
    ios调试-查看日志
    用xcode9编译出ios越狱机程序使用的dylib
    docker运行中的container怎么修改之前run时的env
    (转)解决类似 /usr/lib64/libstdc++.so.6: version `GLIBCXX_3.4.21' not found 的问题
    (转) mysql中left join,right join,inner join的区别
  • 原文地址:https://www.cnblogs.com/HQ0422/p/11438892.html
Copyright © 2020-2023  润新知