ASP.NET Core MVC多图片追加上传而非替换的问题求助

问题分析 #

当前实现的核心问题：

• 浏览器原生file控件默认会替换已选文件，即便开启multiple属性，再次选择仍会覆盖之前的文件
• 前端预览逻辑每次清空容器，无法保留之前选中的图片预览
• 后端循环赋值ar.pic1，最终仅保留最后一张图片的路径，无法存储多张图片信息

前端修改（实现文件追加选择与预览） #

新增全局数组存储所有选中文件，修改预览逻辑实现追加式预览：

<div class="row">
    <input type="file" name="imge1" id="file" asp-for="imge1" class="hidden" multiple accept="image/*">
    <button type="button" class="btn btn-primary" id="filebutton"><span id="filetext">Select File</span></button>
    <div id="preview"></div>
</div>
<div id="image_preview"></div>

<script>
    // 全局数组存储所有选中的文件
    let selectedFiles = [];

    $(document).ready(function () {
        $('#filebutton').click(function () {
            $('#file').click();
        });

        $('#file').change(function () {
            // 将新选择的文件追加到全局数组
            Array.from(this.files).forEach(file => selectedFiles.push(file));
            
            // 更新按钮文本
            updateButtonText();
            
            // 仅预览新选择的文件，保留原有预览
            previewNewFiles(this.files);
        });
    });

    function updateButtonText() {
        if (selectedFiles.length === 0) {
            $('#filetext').html('Select File');
        } else if (selectedFiles.length === 1) {
            $('#filetext').html(selectedFiles[0].name);
        } else {
            $('#filetext').html(selectedFiles.length + ' files ready to upload');
        }
    }

    function previewNewFiles(files) {
        if (files) $.each(files, readAndPreview);

        function readAndPreview(i, file) {
            if (!/\.(jpe?g|png|gif)$/i.test(file.name)) {
                return alert(file.name + " is not an image");
            }
            var reader = new FileReader();
            $(reader).on("load", function () {
                $('#preview').append($("<img>", { src: this.result, height: 80, margin: '0 5px 5px 0' }));
            });
            reader.readAsDataURL(file);
        }
    }
</script>

后端修改（支持多张图片路径存储与上传） #

1. 模型调整 #

将pic1改为存储逗号分隔的多路径字符串：

public string? pic1 { get; set; } // 用逗号分隔多张图片路径
public IFormFileCollection imge1 { get; set; }

2. 控制器代码修复 #

调整文件保存与路径拼接逻辑，收集所有图片路径后存入模型：

public IActionResult aprent([Bind] RentModel ar )
{
    try
    {
        if (ModelState.IsValid)
        {
            if(ar.imge1 != null && ar.imge1.Count>0)
            {
                string folderBase = "image/";
                List<string> imagePaths = new List<string>();
                
                foreach (IFormFile imge in ar.imge1)
                {
                    // 生成唯一文件名避免冲突
                    string uniqueFileName = Guid.NewGuid().ToString() + "_" + imge.FileName;
                    string relativePath = "/" + folderBase + uniqueFileName;
                    string serverFolder = Path.Combine(_IWebHostEnvironment.WebRootPath, folderBase, uniqueFileName);
                    
                    // 保存文件到服务器（using自动释放流）
                    using(var stream = new FileStream(serverFolder, FileMode.Create))
                    {
                        imge.CopyTo(stream);
                    }
                    
                    // 收集当前图片的相对路径
                    imagePaths.Add(relativePath);
                }
                
                // 将所有路径用逗号拼接存入pic1
                ar.pic1 = string.Join(",", imagePaths);
            }
            
            string res = DB.Saverecord(ar);
            string pics = DB.imagedb(ar);

            TempData["msg"] = res;
        }
    }
    catch (Exception ex)
    {
        TempData["msg"] = ex.Message;
    }
    return View();
}

3. 数据库适配说明 #

确保pic1对应的数据库字段长度足够（如使用VARCHAR(MAX)），后续读取图片时可通过ar.pic1.Split(',')拆分路径列表，循环展示图片。

内容的提问来源于stack exchange，提问作者Creative Things