Bootsrap FileInput 图片上传以及配置虚拟路径（简单易懂）

谁践踏了优雅 2021-11-10 08:36 434阅读 0赞

## 前言 ##

唉，改了一天多的坑，就因为一个小小的虚拟路径访问，差点搞得我怀疑人生，啊，不对已经怀疑人生了，不扯皮了，说一下写这个的思路，希望会对你们有所帮助，因为博主以前都是写上传第三方直接回去图片链接放上去就ok了，说实话确实是第一次写这种的，大概的思路就是随便找一个盘符作为图片的存放地址，然后上传到盘符里之后，用虚拟路径来做映射，显示图片，此处（小声BB，明明看Eclipse写的好简单，为啥用idea感觉有点。。。enmmmm。。。此处自行领悟）下边先写一下上传，然后再写配置虚拟路径

## 图片上传 ##

说一下环境哈：idea + Spring Boot

页面用的 html  图片上传的插件用的 [Bootstrap FileInput][Bootstrap_FileInput]

插件地址：[https://download.csdn.net/download/qq\_36537546/11463663][https_download.csdn.net_download_qq_36537546_11463663]

下边是页面的写法，主要的话不用我多说了吧，就是 input 那两行，os 其实我是想分两个博客写的，但是嫌麻烦就写到一起了，enmmmm，博主太懒了！！

![2019080214432496.png][]

上边是页面哈，这个下边是怎么上传的，直接贴代码，就不放图片了，怕挨怼。。。千万别搞错昂，上边是个图片。。就那么短，就不贴出来代码了！！自己敲！！锻炼手速！！

// 图片上传
        $(".myfile").fileinput({
            uploadUrl:"../upload/file_upload", //接受请求地址
            uploadAsync : true, //默认异步上传
            showUpload : false, //是否显示上传按钮,跟随文本框的那个
            showRemove : false, //显示移除按钮,跟随文本框的那个
            showCaption : true,//是否显示标题,就是那个文本框
            showPreview : true, //是否显示预览,不写默认为true
            dropZoneEnabled : false,//是否显示拖拽区域，默认不写为true，但是会占用很大区域
            //minImageWidth: 50, //图片的最小宽度
            //minImageHeight: 50,//图片的最小高度
            //maxImageWidth: 500,//图片的最大宽度
            //maxImageHeight: 500,//图片的最大高度
            //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
            maxFileCount : 1, //表示允许同时上传的最大文件个数
            enctype : 'multipart/form-data',
            validateInitialCount : true,
            previewFileIcon : "<i class='glyphicon glyphicon-king'></i>",
            msgFilesTooMany : "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
            allowedFileTypes : [ 'image' ],//配置允许文件上传的类型
            allowedPreviewTypes : [ 'image' ],//配置所有的被预览文件类型
            allowedPreviewMimeTypes : [ 'jpg', 'png', 'gif' ],//控制被预览的所有mime类型
            language : 'zh'
        })
    
        //异步上传返回结果处理
        $('.myfile').on('fileerror', function(event, data, msg) {
            console.log("fileerror");
            console.log(data);
        });
        //异步上传返回结果处理
        $(".myfile").on("fileuploaded", function(event, data, previewId, index) {
            console.log("获取路径地址为："+data.response.url)
            var  urls = data.response.url;
            $("#url").val(urls);
            $("#url1").val(urls);
        });
    
        //上传前
        $('.myfile').on('filepreupload', function(event, data, previewId, index) {
            console.log("filepreupload");
        });

前端页面就这点东西，没了都写出来！！然后说一下后端上传问题

## 后端上传代码 ##

天知道我写改这个玩意改了多久！！！愁死我了！！连包都给你贴出来！！多贴心啊！！我把多余的代码都删掉了，可以直接使用，改改路径就行。。额。。连路径都不需要改！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NTM3NTQ2_size_16_color_FFFFFF_t_70][]

import com.fasterxml.jackson.databind.ObjectMapper;
    import com.google.common.io.ByteStreams;
    import org.apache.tomcat.util.http.fileupload.FileItemFactory;
    import org.apache.tomcat.util.http.fileupload.FileUploadException;
    import org.apache.tomcat.util.http.fileupload.disk.DiskFileItemFactory;
    import org.apache.tomcat.util.http.fileupload.servlet.ServletFileUpload;
    import org.springframework.stereotype.Controller;
    import org.springframework.util.ResourceUtils;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    import org.springframework.web.multipart.MultipartFile;
    import org.springframework.web.multipart.MultipartHttpServletRequest;
    
    import javax.servlet.ServletContext;
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.File;
    import java.io.FileNotFoundException;
    import java.io.FileOutputStream;
    import java.io.IOException;
    import java.nio.charset.Charset;
    import java.text.SimpleDateFormat;
    import java.util.*;
    
    /**
     * @ClassName：FileUploadController
     * @Description：TODO 文件上传
     * @Author LinLuoChen
     * @Date 2019/7/29/10:27
     * @Version V1.0
     **/
    @Controller
    @RequestMapping("/upload")
    public class FileUploadController {
    
        private static final ObjectMapper objectMapper = new ObjectMapper();
    
        @RequestMapping(value="/file_upload")
        @ResponseBody
        public Map<String, Object> fileUpload(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException,
                FileUploadException {
            ServletContext application = request.getSession().getServletContext();
            String savePath = "C:/upload/";
            // 文件保存目录URL
            String saveUrl = request.getContextPath() + "/upload/";
            // 定义允许上传的文件扩展名
            HashMap<String, String> extMap = new HashMap<String, String>();
            extMap.put("image", "gif,jpg,jpeg,png,bmp");
            extMap.put("flash", "swf,flv");
            extMap.put("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");
            extMap.put("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2");
            // 最大文件大小
            long maxSize = 1000000;
            response.setContentType("text/html; charset=UTF-8");
            if (!ServletFileUpload.isMultipartContent(request)) {
                return getError("请选择文件。");
            }
            // 检查目录
            File uploadDir = new File(savePath);
            if (!uploadDir.isDirectory()) {
                uploadDir.mkdir();
                // return getError("上传目录不存在。");
            }
            // 检查目录写权限
            if (!uploadDir.canWrite()) {
                return getError("上传目录没有写权限。");
            }
            String dirName = request.getParameter("dir");
            if (dirName == null) {
                dirName = "image";
            }
            if (!extMap.containsKey(dirName)) {
                return getError("目录名不正确。");
            }
            // 创建文件夹
            savePath += dirName + "/";
            saveUrl += dirName + "/";
            File saveDirFile = new File(savePath);
            if (!saveDirFile.exists()) {
                saveDirFile.mkdirs();
            }
            SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
            String ymd = sdf.format(new Date());
            savePath += ymd + "/";
            saveUrl += ymd + "/";
            File dirFile = new File(savePath);
            if (!dirFile.exists()) {
                dirFile.mkdirs();
            }
            FileItemFactory factory = new DiskFileItemFactory();
            ServletFileUpload upload = new ServletFileUpload(factory);
            upload.setHeaderEncoding("UTF-8");
            MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
            Iterator item = multipartRequest.getFileNames();
            while (item.hasNext()) {
                String fileName = (String) item.next();
                MultipartFile file = multipartRequest.getFile(fileName);
                // 检查文件大小
                if (file.getSize() > maxSize) {
                    return getError("上传文件大小超过限制。");
                }
                // 检查扩展名
                String fileExt = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".") + 1).toLowerCase();
                if (!Arrays. asList(extMap.get(dirName).split(",")).contains(fileExt)) {
                    return getError("上传文件扩展名是不允许的扩展名。\n只允许"
                            + extMap.get(dirName) + "格式。");
                }
                SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
                String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt;
                try {
                    File uploadedFile = new File(savePath, newFileName);
                    ByteStreams.copy(file.getInputStream(), new FileOutputStream(uploadedFile));
                } catch (Exception e) {
                    return getError("上传文件失败。");
                }
                Map<String, Object> msg = new HashMap<String, Object>();
                msg.put("success", 0);
                msg.put("url", saveUrl + newFileName);
                return msg;
            }
            return null;
        }
    
        private Map<String, Object> getError(String message) {
            Map<String, Object> msg = new HashMap<String, Object>();
            msg.put("error", 1);
            msg.put("message", message);
            return msg;
        }
    
        class NameComparator implements Comparator {
            public int compare(Object a, Object b) {
                Hashtable hashA = (Hashtable) a;
                Hashtable hashB = (Hashtable) b;
                if (((Boolean) hashA.get("is_dir"))
                        && !((Boolean) hashB.get("is_dir"))) {
                    return -1;
                } else if (!((Boolean) hashA.get("is_dir"))
                        && ((Boolean) hashB.get("is_dir"))) {
                    return 1;
                } else {
                    return ((String) hashA.get("filename"))
                            .compareTo((String) hashB.get("filename"));
                }
            }
        }
    
        class SizeComparator implements Comparator {
            public int compare(Object a, Object b) {
                Hashtable hashA = (Hashtable) a;
                Hashtable hashB = (Hashtable) b;
                if (((Boolean) hashA.get("is_dir"))
                        && !((Boolean) hashB.get("is_dir"))) {
                    return -1;
                } else if (!((Boolean) hashA.get("is_dir"))
                        && ((Boolean) hashB.get("is_dir"))) {
                    return 1;
                } else {
                    if (((Long) hashA.get("filesize")) > ((Long) hashB
                            .get("filesize"))) {
                        return 1;
                    } else if (((Long) hashA.get("filesize")) < ((Long) hashB
                            .get("filesize"))) {
                        return -1;
                    } else {
                        return 0;
                    }
                }
            }
        }
    
        class TypeComparator implements Comparator {
            public int compare(Object a, Object b) {
                Hashtable hashA = (Hashtable) a;
                Hashtable hashB = (Hashtable) b;
                if (((Boolean) hashA.get("is_dir"))
                        && !((Boolean) hashB.get("is_dir"))) {
                    return -1;
                } else if (!((Boolean) hashA.get("is_dir"))
                        && ((Boolean) hashB.get("is_dir"))) {
                    return 1;
                } else {
                    return ((String) hashA.get("filetype"))
                            .compareTo((String) hashB.get("filetype"));
                }
            }
        }
    
    }

## 配置虚拟路径 ##

这个玩意这个地方是最让我心塞的地方，写了好久。。其实是因为 Shiro 给我拦截了。。。然后我傻乎乎的以为是路径问题。。虽然路径确实有问题。。尴尬。。不说了直接看代码

在你方法的主类里边配置一下，或者新建一个 Class 这个都随你，哈哈,，这个是项目启动的时候加载哈，加载一次

import org.springframework.beans.factory.annotation.Value;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
    import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;
    
    @Configuration
    public class UploadConfig  extends WebMvcConfigurationSupport {
    
        @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry) {
            String filepath = C:\\upload\\; // 这地方是你上传文件的地址
            registry.addResourceHandler("/upload/**").addResourceLocations("file:"+filepath);
            super.addResourceHandlers(registry);
        }
    }

然后，然后就没有然后了，直接测试运行就 ok 了，我懒直接拿朋友的测试图片来充当一下，哈哈哈

运行界面，没写界面直接用的 Postman 。。。图中的那个 uploadFile 换成 upload 就是我的那个方法。。enmmm

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NTM3NTQ2_size_16_color_FFFFFF_t_70 1][]

如果有不明白的可以留言评论，另外博主第一次写，如果有不对的地方，欢迎留言指教，谢谢！！

博主Q ： 3044793043

[Bootstrap_FileInput]: http://www.baidu.com/link?url=O60cS95bLbEDGSp5kFM0ZeIe_l16yIyWI7wAyRtVGoBUvrTANzQ4jQPAS6oCm-yyG1y1bNQp2Xp46EScJz1v5a
[https_download.csdn.net_download_qq_36537546_11463663]: https://download.csdn.net/download/qq_36537546/11463663
[2019080214432496.png]: /images/20211109/20b3bb54d8514891b77d3e8453d1b43a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NTM3NTQ2_size_16_color_FFFFFF_t_70]: /images/20211109/df76aaf8d08343b9bb71271b34535576.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NTM3NTQ2_size_16_color_FFFFFF_t_70 1]: /images/20211109/900c0e42af7a4ff08ce7ca2bde6f3d64.png