前兩天做了一個layui上傳圖片的功能在這裏給大家分享一下
我做的是一個添加，廢話不多說，上酸菜
該上傳圖片是沒有綁定保存按鈕，是直接上傳的，如果想讓圖片跟參數一同提交只需要綁定提交按鈕就行。
https://www.layui.com/doc/modules/upload.html官網
$("#personnelAdd").click(function () {
layer.open({
type: 1,
title: "添加信息",
skin: 'layui-layer-rim',
area: ['600px', '630px'],
content: '<div style="padding: 20px">\n' +
' <form class="layui-form" enctype="text/plain">\n' +
' <div class="layui-upload"> \n'+
' <label class="layui-form-label">照片</label> \n'+
' <button type="button" class="layui-btn" id="test1">上傳圖片</button> \n'+
' <div id="upload-list" class="layui-upload-list" style="width:100px;height:100px;border:1px solid #0099CC;margin-left: 109px;"> \n'+
' <img class="layui-upload-img" id="demo1" style="width: 100px;height:100px;"> \n'+
' <p id="demoText"></p> \n'+
' <input type="text" id="personnelImage" name="personnelImage" class="layui-input" style="display:none">\n' +
' </div> \n'+
' </div> \n'+
' <div style="text-align: center">\n' +
' <button class="layui-btn layui-btn-normal" lay-submit lay-filter="add_personnel">保存</button>\n' +
' </div>\n' +
' </form>\n' +
'</div>'
});
$("#upload-list").hide();
var uploadInst = upload.render({
elem: '#test1'
,exts: 'png|jpg|jpeg'
// ,bindAction:'add_personnel' //綁定提交按鈕和參數一同提交後臺
,url: layui.cache.host + '/personnel/upload/'
,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('上傳失敗');
}else{
//上傳成功
$("#upload-list").show();//顯示圖片
$("#personnelImage").val(res.fileName);//將名稱放到標籤中，保存時候用
}
}
,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();
});
}
});
});
//添加提交
layui.form.on('submit(add_personnel)', function (data) {
common.ajaxPost(layui.cache.host + '/personnel/info/save', data.field, function (res) {
layer.alert(JSON.stringify(res));
window.parent.location.reload();
});
layer.closeAll();
return false;//post提交方式，layui默認get參數過多會導致錯誤
});
})
後端：
controller
@PostMapping("upload")
@ResponseBody
public Map<String, Object> upload(HttpServletRequest request,
@RequestParam("file") MultipartFile file
) throws IOException {
Map<String, Object> res = new HashMap<>();
//如果文件內容不爲空，則寫入上傳路徑
if (!file.isEmpty()) {
//上傳文件路徑
//上傳文件名
Date d = new Date();
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
String date = sdf.format(d);
String replaceAll = UUID.randomUUID().toString().replaceAll("-", "");
String fileName = date+"-"+replaceAll+"-"+file.getOriginalFilename();
String paths = path;//保存的路徑
File filepath = new File(paths, fileName);
//判斷路徑是否存在，沒有就創建一個
if (!filepath.getParentFile().exists()) {
filepath.getParentFile().mkdirs();
}
//將上傳文件保存到一個目標文檔中
File file1 = new File(paths + File.separator + fileName);
file.transferTo(file1);
//返回的是一個url對象
res.put("url", file1);
res.put("fileName", "upload/"+fileName);//保存數據庫的路徑，方便讀取
return res;
} else {
res.put("error","上傳錯誤");
return res;
}
}