zyupload 进行源码改造 上传图片限制一张

zyupload.zip-互联网文档类资源-CSDN下载

1、juery 文件上传使用比较方便，但是在上传头像只限制一张图片不能一次性上传多个文件的场景查阅文档发现并不支持，后自己改造了一点点方便使用。

2、插件html

<link rel="stylesheet" href="/lib/jq-module/zyupload/zyupload-1.0.0.min.css" media="all">
<div class="layuimini-main">
    <div class="layui-form layuimini-form">
        <div class="layui-form-item">
            <label class="layui-form-label required">头像</label>
            <div class="layui-input-block">
                <div id="zyupload"></div>
            </div>
        </div>
    </div>
</div>
<script src="/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="/lib/jq-module/zyupload/zyupload-1.0.0.min.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'table', 'layarea'], function () {
        var form = layui.form;
        // 初始化插件
        $("#zyupload").zyUpload({
            width: "650px",//宽度
            height: "400px",//宽度
            itemWidth: "140px",//文件项的宽度
            itemHeight: "115px",//文件项的高度
            url: "/platform/userFileUpload", //上传文件的路径
            fileType: ["jpg", "png"],//上传文件的类型
            fileSize: 51200000,//上传文件的大小
            multiple: false, //是否可以多个文件上传
            dragDrop: true,//是否可以拖动上传文件
            tailor: false,//是否可以裁剪图片
            del: true,//是否可以删除文件
            finishDel: false,// 是否在上传文件完成后删除预览
            /* 外部获得的回调接口 */
            onSelect: function (selectFiles, allFiles) {//选择文件的回调方法  selectFile:当前选中的文件  allFiles:还没上传的全部文件
                console.info("当前选择了以下文件：");
                console.info(selectFiles);
            },
            onDelete: function (file, files) {//删除一个文件的回调方法 file:当前删除的文件  files:删除之后的文件
                console.info("当前删除了此文件：");
                console.info(file.name);
            },
            onSuccess: function (file, response) {//文件上传成功的回调方法
                console.info("此文件上传成功：");
                console.info(file.name);
                console.info("此文件上传到服务器地址：");
                console.info(response);
                window.parent.show();
                $("#uploadInf").append("<p style='color: #c24f4a'>上传成功，已经成功保存到" + response + "</p>");
            },
            onFailure: function (file, response) {//文件上传失败的回调方法
                console.info("此文件上传失败：");
                console.info(file.name);
            },
            onComplete: function (response) {//上传完成的回调方法
                console.info("文件上传完成");
                console.info(response);
            }
        });
    });

</script>

 3、上传和读取图片文件

package com.lw.controller;

import com.lw.config.OperLog;
import com.lw.entity.SystemUser;
import com.lw.service.SystemUserService;
import com.lw.utils.CommunalUtils;
import com.lw.utils.FileUtils;
import com.lw.utils.SesionUtils;
import com.lw.utils.UuidFileNameUtils;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.core.env.Environment;
import org.springframework.core.io.ResourceLoader;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

/**
 * @Auther:LW
 * @Date:2022年1月11日 12:43
 */
@Slf4j
@Controller
@RequestMapping("/platform")
public class AuxiliaryController {
    private final ResourceLoader resourceLoader;

    @Autowired
    public AuxiliaryController(ResourceLoader resourceLoader) {
        this.resourceLoader = resourceLoader;
    }

    @Autowired
    private SystemUserService systemUserService;

    @Autowired
    private Environment env;


    /**
     *
     * @param file 要上传的文件
     * @return
     */
    @RequestMapping("/userFileUpload")
    @ResponseBody
    @OperLog(operModul="后台系统-用户头像",operType= CommunalUtils.DELETE,operDesc="头像修改")
    public String  upload(@RequestParam("file") MultipartFile file){
        SystemUser user = SesionUtils.getSysUserSession();
        String flieName = user.getUsername()+"-"+ UuidFileNameUtils.getFileName(file.getOriginalFilename());
        FileUtils.upload(file, env.getProperty("platform.filePaht"),flieName);
        user.setImageName(flieName);
        systemUserService.sysUserIamgeEdit(user);
        return "系统";
    }

    /**
     * 显示单张图片
     * @return
     */
    @RequestMapping("/userFileShow")
    public ResponseEntity userFileShow(){
        try {
            // 由于是读取本机的文件，file是一定要加上的， path是在application配置文件中的路径
            return ResponseEntity.ok(resourceLoader.getResource("file:" + env.getProperty("platform.filePaht")+"/" + SesionUtils.getSysUserSession().getImageName()));
        } catch (Exception e) {
            return ResponseEntity.notFound().build();
        }
    }


}

package com.lw.utils;

import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;

/**
 * @Auther:LW
 * @Date:2022年1月10日 10:54
 * 上传文件工具类
 */
public class FileUtils {

    /**
     *
     * @param file 文件
     * @param path 文件存放路径
     * @param fileName 源文件名
     * @return
     */
    public static boolean upload(MultipartFile file, String path, String fileName){
        //生成新的文件名
        String realPath = path + "/" + fileName;
        File dest = new File(realPath);
        if(!dest.getParentFile().exists()){//判断文件父目录是否存在
            dest.getParentFile().mkdir();
        }
        try {
            //保存文件
            file.transferTo(dest);
            return true;
        } catch (IllegalStateException e) {
            e.printStackTrace();
            return false;
        } catch (IOException e) {
            e.printStackTrace();
            return false;
        }
    }
}

  4、img读取

4、进行图片一张图片限制控制

 

5、修改头像立即进行更新 

 

  zyupload.zip-互联网文档类资源-CSDN下载   zyupload 改造包下载链接