최신 버전의 layui를 사용해야 합니다. 초기 설정 시 여러 문제점에 직면했으며, 해결 과정을 공유합니다.
layui.js와 layui.all.js의 차이점을 인지하지 못해 발생한 오류는 다음과 같습니다. upload.render 메서드가 존재하지 않는 경우, layui.all.js를 사용해야 하지만 파일 업로드 기능이 동작하지 않는 문제가 발생했습니다. 이는 브라우저 캐시나 경로 설정 문제로 추정되며, 최신 버전으로 업데이트 후 정상 작동했습니다.
다음은 이미지 업로드 기능 구현 예제입니다.
public class FileUploadController : ControllerBase
{
public IActionResult UploadImages()
{
var resultUrls = new List();
foreach (var file in Request.Files)
{
var url = ProcessFileUpload(file);
if (!string.IsNullOrEmpty(url))
resultUrls.Add(url);
}
return Json(new { success = true, urls = string.Join(",", resultUrls) });
}
private string ProcessFileUpload(HttpPostedFileBase file)
{
var uploadPath = Path.Combine("Uploads", "Images");
Directory.CreateDirectory(uploadPath);
var ext = Path.GetExtension(file.FileName).Substring(1);
var maxSize = 300 * 1024; // 300KB
if (file.ContentLength > maxSize)
return null;
var fileName = Guid.NewGuid() + "." + ext;
var filePath = Path.Combine(uploadPath, fileName);
file.SaveAs(filePath);
return "/Uploads/Images/" + fileName;
}
}
layui.use(['upload', 'element'], function() {
var upload = layui.upload;
var element = layui.element;
// 주 이미지 업로드
upload.render({
elem: '#mainImage'
, url: '/FileUpload/UploadImages'
, before: function(obj) {
obj.preview(function(index, file, result) {
$('#previewArea').removeClass('layui-hide');
$('#previewImg').attr('src', result);
});
}
, done: function(res) {
if(res.code === 0) {
$('#mainPicInput').val(res.url);
}
}
});
// 상세 이미지 업로드
upload.render({
elem: '#detailImages'
, url: '/FileUpload/UploadImages'
, multiple: true
, before: function(obj) {
var files = obj.pushFile();
obj.preview(function(index, file, result) {
var html = $([
'',
' 
',
' x',
''
].join(''));
$('.img-container').append(html);
$('.close-btn').on('click', function() {
delete files[index];
$(this).parent().remove();
});
});
}
, done: function(res) {
if(res.code === 0) {
$('#detailPicInputs').val(res.urls);
}
}
});
});