項(xiàng)目場景：
layui+java spring 實(shí)現(xiàn)圖片文件新增到數(shù)據(jù)庫
解決方案：
1.首先layui是個(gè)不再更新的網(wǎng)址有想了解的可以瀏覽官網(wǎng)
表格組件 table - Layui 文檔
2.官網(wǎng)內(nèi)有專門的組件 代碼直接粘過來即可
<!DOCTYPE html>
<html>
<head>
? <meta charset="utf-8">
? <meta name="viewport" content="width=device-width, initial-scale=1">
? <title>Demo</title>
? <!-- 請勿在項(xiàng)目正式環(huán)境中引用該 layui.css 地址 -->
? <link rel="stylesheet">
</head>
<body>
<button type="button" class="layui-btn" id="ID-upload-demo-btn">
? <i class="layui-icon layui-icon-upload"></i> 單圖片上傳
</button>
<div style="width: 132px;">
? <div class="layui-upload-list">
? ? <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">
? ? <div id="ID-upload-demo-text"></div>
? </div>
? <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
? ? <div class="layui-progress-bar" lay-percent=""></div>
? </div>
</div>
<hr style="margin: 21px 0;">
<div class="layui-upload">
? <button type="button" class="layui-btn" id="ID-upload-demo-btn-2">
? ? <i class="layui-icon layui-icon-upload"></i> 多圖片上傳
? </button>?
? <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px;">
? ? 預(yù)覽圖：
? ? <div class="layui-upload-list" id="upload-demo-preview"></div>
?</blockquote>
</div>
??
<!-- 請勿在項(xiàng)目正式環(huán)境中引用該 layui.js 地址 -->
<script src="http://unpkg.com/layui@2.8.17/dist/layui.js"></script>
<script>
layui.use(function(){
? var upload = layui.upload;
? var layer = layui.layer;
? var element = layui.element;
? var $ = layui.$;
? // 單圖片上傳
? var uploadInst = upload.render({
? ? elem: '#ID-upload-demo-btn',
? ? url: '', // 實(shí)際使用時(shí)改成您自己的上傳接口即可。
? ? before: function(obj){
? ? ? // 預(yù)讀本地文件示例，不支持ie8
? ? ? obj.preview(function(index, file, result){
? ? ? ? $('#ID-upload-demo-img').attr('src', result); // 圖片鏈接（base64）
? ? ? });
? ? ??
? ? ? element.progress('filter-demo', '0%'); // 進(jìn)度條復(fù)位
? ? ? layer.msg('上傳中', {icon: 16, time: 0});
? ? },
? ? done: function(res){
? ? ? // 若上傳失敗
? ? ? if(res.code > 0){
? ? ? ? return layer.msg('上傳失敗');
? ? ? }
? ? ? // 上傳成功的一些操作
? ? ? // …
? ? ? $('#ID-upload-demo-text').html(''); // 置空上傳失敗的狀態(tài)
? ? },
? ? error: function(){
? ? ? // 演示失敗狀態(tài)，并實(shí)現(xiàn)重傳
? ? ? var demoText = $('#ID-upload-demo-text');
? ? ? 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();
? ? ? });
? ? },
? ? // 進(jìn)度條
? ? progress: function(n, elem, e){
? ? ? element.progress('filter-demo', n + '%'); // 可配合 layui 進(jìn)度條元素使用
? ? ? if(n == 100){
? ? ? ? layer.msg('上傳完畢', {icon: 1});
? ? ? }
? ? }
? });
? // 多圖片上傳
? upload.render({
? ? elem: '#ID-upload-demo-btn-2',
? ? url: '', // 實(shí)際使用時(shí)改成您自己的上傳接口即可。
? ? multiple: true,
? ? before: function(obj){
? ? ? // 預(yù)讀本地文件示例，不支持ie8
? ? ? obj.preview(function(index, file, result){
? ? ? ? $('#upload-demo-preview').append('<img src="'+ result +'" alt="'+ file.name +'" style="width: 90px; height: 90px;">')
? ? ? });
? ? },
? ? done: function(res){
? ? ? // 上傳完畢
? ? ? // …
? ? }
? });
});</script>
</body>
</html>
這是官網(wǎng)的組件完整代碼根據(jù)需求自己更改就行,前端就這些沒啥很需要注意的
3.java代碼
需要注意的點(diǎn), String uploadDir = "D:\\";寫自己定義的路徑?
?
/** * 通用上傳請求 */ @PostMapping("/uploads") @ResponseBody public JsonResult uploads(@RequestParam("file") MultipartFile file) throws IOException { // 獲取文件名 String fileName = file.getOriginalFilename(); // 獲取文件內(nèi)容 byte[] bytes = file.getBytes(); // 文件保存目錄 String uploadDir = "D:\\"; // 文件保存路徑 String filePath = uploadDir + "/" + fileName; // 保存文件 File desc = new File(filePath); if (!desc.exists()) { if (!desc.getParentFile().exists()) { desc.getParentFile().mkdirs(); } } file.transferTo(desc); // 返回文件訪問路徑 return JsonResult.success("成功", filePath); }
? if (!desc.exists()) { if (!desc.getParentFile().exists()) { desc.getParentFile().mkdirs(); } }
這個(gè)if判斷是判斷你路徑內(nèi)有無文件沒有的話則會給你創(chuàng)建一個(gè)文件用于存儲圖片,然后將路徑和文件名返回給前端,前端定義一個(gè)字符串類型將這個(gè)路徑傳到后端就可以了
后端就是正常的新增寫法 就不過多說了
也可以觀看這個(gè)鏈接的也不錯文章來源：http://www.zghlxwxcb.cn/news/detail-729563.html
?java如何將圖片儲存到數(shù)據(jù)庫？_java上傳圖片保存到數(shù)據(jù)庫-CSDN博客文章來源地址http://www.zghlxwxcb.cn/news/detail-729563.html
到了這里，關(guān)于layui+java spring 實(shí)現(xiàn)圖片文件新增到數(shù)據(jù)庫的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
