图片上传小demo

上传图片小demo

html根据页面定义

    <div class="layui-form-item">
        <label class="layui-form-label">照片：</label>
        <div class="layui-input-block">
            <div id="zyupload" class="zyupload"></div>
            <input id="lg" type="hidden" name="img" value="" class="layui-input">
        </div>
    </div>

script

$("#zyupload").zyUpload({
        width: "100%",                 // 宽度
        height: "100%",                 // 宽度
        itemWidth: "100%",                 // 文件项的宽度
        itemHeight: "100%",                 // 文件项的高度
        url: "/api/bigRoom/uploadImg.do",  // 上传文件的路径
        fileType: ["jpg", "png", "txt", "js", "exe"],// 上传文件的类型
        fileSize: 51200000,                // 上传文件的大小
        multiple: false,                    // 是否可以多个文件上传
        dragDrop: true,                    // 是否可以拖动上传文件
        tailor: true,                    // 是否可以裁剪图片
        del: true,                    // 是否可以删除文件
        finishDel: false,
        onSuccess: function (file, res) {          // 文件上传成功的回调方法
            console.info("此文件上传成功：");
            console.info(file.name);
            console.info("此文件上传到服务器地址：");
            console.info(res);
            var r=JSON.parse(res);
            $("#uploadInf").append("<p>上传成功，文件地址是：" + r.data + "</p>");
            $("#lg").val(r.data);
        }
    });

controller 控制器层

    @PostMapping("uploadImg.do")
    public R upload(MultipartFile file, HttpServletRequest request) throws IOException {
        //1.验证文件是否存在
        if(!file.isEmpty()){
            //2.获取上传文件名并完成重命名
            String fn= FileUtil.reName(file.getOriginalFilename());
            //3.获取上传的文件内容
            byte[] data=file.getBytes();
            //4.创建文件存储的文件夹
            File dir=new File(request.getServletContext().getRealPath("/upload"));
            if(!dir.exists()){
                dir.mkdirs();
            }
            //5.存储
            IOUtils.write(data,new FileOutputStream(new File(dir,fn)));
            //6.返回
            return R.ok("/upload/"+fn);
        }else {
            return R.fail();
        }
    }

 

util工具类

public class FileUtil {
    public static String reName(String f){
        if(f.length()>30){
            f=f.substring(f.length()-30);
        }
        return System.currentTimeMillis()+"_"+f;
    }
}