文件上传这个功能是做网站必不可少的,layui中的文件上传还是挺不错的,简单实用
1、form表单进行文件上传,中间表单内容我就省略了,注意:enctype设为multipart/form-data

        <form  class="layui-form layui-form-pane" id="addgoods" style="padding: 15px;display: none"  enctype="multipart/form-data" >
            <input hidden="hidden" name="downPath" id="downPath">
            <div class="layui-form-item">
                    <label class="layui-form-label">办公用品名称</label>
                    <div class="layui-input-inline">
                        <input name="name" class="layui-input" lay-verify="required" type="text" placeholder="办公用品名称"  >
                    </div>
                </div>
                <div class="layui-form-item">
                <label class="layui-form-label">上传附件</label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn"  id="uploadFile" lay-verify="isupload">选择文件</button>
                    <span id="filename" ></span>
                </div>
            </div>

                <div  class="layui-form-item" style="position: relative;left: 120px">
                    <button   class="layui-btn"  lay-submit lay-filter="add" type="submit">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </form>

2、js部分,点击上传时进行上传操作;bindAction这个值大家注意点,这个值指向一个按钮触发,你如果是上传多张图片的话可以把这个值指向提交按钮,提交的时候进行文件上传,都是在后台操作,容易存储多张图片的路径,这里因为是一张图片,我是点击的时候直接上传图片,地址由controller返回,赋值为Hidden中.

upload.render({
            elem: '#uploadFile', //绑定元素(上传文件的id)
            url: 'goods/filetoService', //上传接口
            method: 'POST',
            auto: true,
            accept: 'images',//指定允许上传时校验的文件类型
            acceptMime: 'image/*',//规定打开文件选择框时,筛选出的文件类型,值为用逗号隔开的 MIME 类型列表
            field:'file',//设定文件域的字段名
            //bindAction: '#submit', //指向一个按钮触发上传
        size: 102400,//限制文件大小10M
            multiple: false,
            data:{},
            choose:function(obj){
                obj.preview(function(index, file, result){
                    if(file.name.length>0) {
                        choose_file_flag=true;
                        $("#filename").text(file.name);
                    }
                });
            },
            before: function(obj) {
                obj.preview(function(index, file, result){
                    layer.load();
                    if(file.name.length>0) {
                        choose_file_flag=true;
                    }
                });

            },

            done: function(res, index, upload) {//上传完毕回调
                if(isnull&&choose_file_flag){
                    layer.closeAll('loading');
                    if(res.code==0){
                       //上传完成,文件路径进行入库存储
                        downPath=res.downPath;
                        $("#downPath").val(res.downPath)
                    }else{
                       // parent.layer.alert(res.info)
                    }
                }
            }
            , error: function() {//请求异常回调
                layer.closeAll('loading');
                layer.alert('网络异常,请稍后重试!');
            }
        });

3、前台进行验证到底上传没上传图片

form.verify({
            isupload: function(value, item){//isupload的是lay-verify="isupload"定义的
                if(choose_file_flag==false){
                    return '请选择文件';
                }
            }


        });

4、后台的上传接口,NASUtils这个工具类我就不传了,文件服务器类型不同,上传的工具不同,后台主要是接收前台的file,由于是MultipartFile类型,我这边转成了file类型,唯一的问题是转换过程中会在根目录生成该文件,需要删除

 //上传图片
    @ResponseBody
    @PostMapping("filetoService")
    public JSONObject userupimg(@RequestParam(value = "file") MultipartFile file, HttpServletRequest request) throws Exception {
        File file1 = MultiFileUtils.multipartFileToFile(file);
//由于文件服务器读取中文乱码,文件名改为数字
        String s = "" + (int) ((Math.random() * 9 + 1) * 1000);
        String name = s + "." + file1.getName().split("\\.")[1];
        String downPath = NASUtils.NasUploadFileToFileserver(UUIDGenerator.getUUID(), name, file1);
        if (!StringUtils.isEmpty(downPath)){//上传成功后需要删除
          file1.delete();
        }
        JSONObject jsonObject = new JSONObject();
        jsonObject.put("downPath", downPath);
        jsonObject.put("code", 0);
        jsonObject.put("msg", "上传成功");

        return jsonObject;
    }

5、MultiFileUtils工具类

package com.project1.utils;

import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.io.OutputStream;

public class MultiFileUtils {
    public static File multipartFileToFile(MultipartFile file) throws Exception {

        File toFile = null;
        if (file.equals("") || file.getSize() <= 0) {
            file = null;
        } else {
            InputStream ins = null;
            ins = file.getInputStream();
                toFile = new File(file.getOriginalFilename());
            inputStreamToFile(ins, toFile);
            ins.close();
        }
        return toFile;
    }
    private static void inputStreamToFile(InputStream ins, File file) {
        try {
            OutputStream os = new FileOutputStream(file);
            int bytesRead = 0;
            byte[] buffer = new byte[8192];
            while ((bytesRead = ins.read(buffer, 0, 8192)) != -1) {
                os.write(buffer, 0, bytesRead);
            }
            os.close();
            ins.close();
        } catch (Exception e) {
            e.printStackTrace();
        }


    }

}

到此就结束了,其实后台接收到file了,剩下的就简单了,找到适合自己文件服务器的工具类

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐