zoukankan      html  css  js  c++  java
  • 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});
            
            }                    


  • 相关阅读:
    PHP 开发 APP 接口 --Redis篇
    PHP 开发 APP 接口--静态缓存篇
    PHP 开发 APP 接口 --JSON、XML结合篇
    PHP 开发 APP 接口 --JSION篇
    PHP 开发 APP 接口--XML篇
    程序员必须掌握的600个英语单词
    Memcache
    伪静态
    ob缓冲
    函数的使用顺序---TABLES,USING,CHANGING
  • 原文地址:https://www.cnblogs.com/HQ0422/p/11438892.html
Copyright © 2011-2022 走看看