springboot上傳文件,url直接訪問資源問題
主要解決問題
直接上傳到服務器的文件是在編譯后的目錄里,是無法通過url 訪問到的
—只演示上傳圖片返回 url 直接訪問
1、上傳文件值項目跟目錄
2、賦值上傳文件目錄讀寫權限
----以下是layui相關,非layui無視即可
3、Layui --> 數(shù)據(jù)返回格式
4、Layui --> 修改上傳–> 2、上傳文件值項目跟目錄(只修改返回格式)
5、Layui --> Html代碼
6、Layui --> Js上傳文件代碼
效果展示(前臺使用的Layui )
上傳前
上傳后(此處直接使用的上傳后的 url 展示,不是本地文件展示)
url 是可以直接訪問的
1、上傳文件方法
/** * 文件上傳 * @author peter 2018/10/20 21:32 */ @Controller public class FileController { /** * 上傳路徑 */ private static String UPLOAD_PATH = "File/image/upload"; /** * 圖片上傳,需要賦值讀寫權限--> * * @author wangsong * @date 2019年6月14日 下午2:31:49 * @param request * @return */ @RequestMapping(value = "/uploadImage", method = RequestMethod.POST) @ResponseBody public JSONObject uploadImage(HttpServletRequest request) { try { MultipartFile image = ((MultipartHttpServletRequest) request).getFile("file"); String name = image.getOriginalFilename(); InputStream inputStream = image.getInputStream(); // 獲得客戶端發(fā)送請求的完整url String url = request.getRequestURL().toString(); // 獲得去除接口前的url String urlVal = url.replace("/uploadImage", ""); // 目錄路徑 Path directory = Paths.get(UPLOAD_PATH); // 判斷目錄是否存在,不存在創(chuàng)建 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; String path = urlVal + "/" + UPLOAD_PATH + "/" + name; // layui 數(shù)據(jù)格式返回 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; } } /** * 使用流將圖片輸出 * @param response * @param name * @throws IOException */ @GetMapping("/getImage/{name}") public void getImage(HttpServletResponse response, @PathVariable("name") String name) throws IOException { response.setContentType("image/jpeg;charset=utf-8"); response.setHeader("Content-Disposition", "inline; filename=girls.png"); ServletOutputStream outputStream = response.getOutputStream(); outputStream.write(Files.readAllBytes(Paths.get(UPLOAD_PATH).resolve(name))); outputStream.flush(); outputStream.close(); } }
2、賦與上傳文件目錄讀寫權限
package com.hy.wargame.config; import java.util.ArrayList; import java.util.List; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.InterceptorRegistry; import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry; import org.springframework.web.servlet.config.annotation.ViewControllerRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; import com.hy.wargame.interceptor.LoginInterceptor; /** * 項目根目錄下 /File/** * @author wangsong * @date 2019年4月10日 下午4:21:08 */ @Configuration public class MvcConfig implements WebMvcConfigurer { /** * 賦值文件讀寫權限 */ @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/File/**").addResourceLocations("file:File/"); } }
----以下是layui相關,非layui無視即可
3、Layui --> 數(shù)據(jù)返回格式
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 要求返回的數(shù)據(jù)格式
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 數(shù)據(jù)格式返回,path 為data數(shù)據(jù),返回的值 Map<String, Object> jsonObjMap = FileData.jsonObj(path); JSONObject resObj = JSONObject.fromObject(jsonObjMap); return resObj;
完整上傳代碼
@RequestMapping(value = "/uploadImage", method = RequestMethod.POST) @ResponseBody public 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); // 判斷目錄是否存在,不存在創(chuàng)建 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 數(shù)據(jù)格式返回 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('上傳失敗'); } //上傳成功 //后臺保存數(shù)據(jù)庫 $("#path").val(res.data); //顯示url $("#url").html(res.data); //通過url預覽服務器圖片 $("#demo1").attr("src",res.data); } ,error: function(){ //演示失敗狀態(tài),并實現(xiàn)重傳 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>
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
SpringBoot開發(fā)技巧之使用AOP記錄日志示例解析
這篇文章主要為大家介紹了SpringBoot開發(fā)技巧之如何利用AOP記錄日志的示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步2021-10-10Android開發(fā)Kotlin實現(xiàn)圓弧計步器示例詳解
這篇文章主要為大家介紹了Android開發(fā)Kotlin繪制圓弧計步器示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-06-06Nacos客戶端配置中心緩存動態(tài)更新實現(xiàn)源碼
這篇文章主要為大家介紹了Nacos客戶端配置中心緩存動態(tài)更新實現(xiàn)源碼,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步早日升職加薪2022-03-03詳解Springboot應用中設置Cookie的SameSite屬性
Chrome 51 開始,瀏覽器的 Cookie 新增加了一個SameSite屬性,用來防止 CSRF 攻擊和用戶追蹤。今天通過本文給大家介紹Springboot應用中設置Cookie的SameSite屬性,感興趣的朋友一起看看吧2022-01-01