– 主要解决问题：直接上传到服务器的文件是在编译后的目录里，是无法通过url 访问到的
—只演示上传图片返回 url 直接访问
1、上传文件值项目跟目录
2、赋值上传文件目录读写权限
----以下是layui相关，非layui无视即可
3、Layui --> 数据返回格式
4、Layui --> 修改上传–> 2、上传文件值项目跟目录（只修改返回格式）
5、Layui --> Html代码
6、Layui --> Js上传文件代码
上传前
上传后（此处直接使用的上传后的 url 展示，不是本地文件展示）
url 是可以直接访问的
----以下是layui相关，非layui无视即可
3、Layui --> 数据返回格式maven 依赖 json-lib 没有的加上
<!-- https://mvnrepository.com/artifact/net.sf.json-lib/json-lib --><!-- jsonObject 支持 --><dependency><groupId>net.sf.json-lib</groupId><artifactId>json-lib</artifactId><version>2.4</version><classifier>jdk15</classifier></dependency>layui 要求返回的数据格式
package com.hy.wargame.controller.manage.vo;import java.util.Hashtable;import java.util.Map;public class FileData {public static Map<String, Object> jsonObj(Object data) {Map<String, Object> resObj = new Hashtable<String, Object>();resObj.put("code", "0");resObj.put("msg", "ok");resObj.put("data", data);System.out.println(resObj);return resObj;}public static Map<String, Object> jsonObj(int code, String msg) {Map<String, Object> resObj = new Hashtable<String, Object>();resObj.put("code", code);resObj.put("msg", msg);resObj.put("data", 0);System.out.println(resObj);return resObj;}} 4、Layui --> 修改上传–> 2、上传文件值项目跟目录（只修改返回格式） // layui 数据格式返回，path 为data数据，返回的值Map<String, Object> jsonObjMap = FileData.jsonObj(path);JSONObject resObj = JSONObject.fromObject(jsonObjMap);return resObj;完整上传代码
@RequestMapping(value = "/uploadImage", method = RequestMethod.POST)@ResponseBodypublic JSONObject uploadImage(HttpServletRequest request) {try {MultipartFile image = ((MultipartHttpServletRequest) request).getFile("file");String name = image.getOriginalFilename();InputStream inputStream = image.getInputStream();// 目录路径Path directory = Paths.get(UPLOAD_PATH);// 判断目录是否存在，不存在创建if (!Files.exists(directory)) {Files.createDirectories(directory);}// 判断文件是否存在,存在删除if (Files.exists(directory.resolve(name))) {File file = new java.io.File(UPLOAD_PATH + "/" + name);file.delete();}// 拷贝文件Files.copy(inputStream, directory.resolve(name));// url路径String path = serverConfig.getUrl() + "/" + UPLOAD_PATH + "/" + name;// layui 数据格式返回Map<String, Object> jsonObjMap = FileData.jsonObj(path);JSONObject resObj = JSONObject.fromObject(jsonObjMap);return resObj;} catch (Exception e) {Map<String, Object> jsonObjMap = FileData.jsonObj(200, "上传失败");JSONObject resObj = JSONObject.fromObject(jsonObjMap);return resObj;}} 5、Layui --> Html代码 <div class="layui-upload"> <label class="layui-form-label">活动图片：</label> <button type="button" class="layui-btn" id="test6">上传图片</button> <input type="hidden" id="path" name="path" value=""> <span id="url" ></span> <div class="layui-upload-list" > <img class="layui-upload-img" style="width: 500px;height: 200px;margin-left: 15%" id="demo1"> <p id="demoText"></p> </div> </div>说明：
6、Layui --> Js上传文件代码 <script>layui.use(['form', 'layedit', 'laydate','upload'], function(){ var form = layui.form ,layer = layui.layer ,layedit = layui.layedit ,laydate = layui.laydate ,upload = layui.upload; //普通图片上传 var uploadInst = upload.render({ elem: '#test6' ,url: '/uploadImage' ,before: function(obj){ //预读本地文件示例，不支持ie8 /* obj.preview(function(index, file, result){ $('#demo1').attr('src', result); //图片链接（base64） }); */ } ,done: function(res){ //如果上传失败 if(res.code > 0){ return layer.msg('上传失败'); } //上传成功 //后台保存数据库 $("#path").val(res.data); //显示url $("#url").html(res.data); //通过url预览服务器图片 $("#demo1").attr("src",res.data); } ,error: function(){ //演示失败状态，并实现重传 var demoText = $('#demoText'); demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>'); demoText.find('.demo-reload').on('click', function(){ uploadInst.upload(); }); } }); <script>