带字幕的多图像文件上传

我设法通过foreach循环获取字幕，但现在我正面临一个新问题。

由于嵌套循环，我在数据库中得到重复，请检查下面的代码。

JavaScript的

 window.onload = function () { if (window.File && window.FileList && window.FileReader) { var filesInput = document.getElementById("galleryFilesAdd"); filesInput.addEventListener("change", function (event) { var files = event.target.files; //FileList object var output = document.getElementById("result"); for (var i = 0; i < files.length; i++) { var file = files[i]; if (!file.type.match('image')) continue; var picReader = new FileReader(); picReader.addEventListener("load", function (event) { var picFile = event.target; var div = document.createElement("div"); div.innerHTML = " " output.insertBefore(div, null); div.children[1].addEventListener("click", function (event) { div.parentNode.removeChild(div); }); }); //Read the image picReader.readAsDataURL(file); } }); } else { console.log("Your browser does not support File API"); } } 

调节器

 public async Task AddHotel(HotelViewModels.AddHotel viewModel, IEnumerable galleryFilesAdd) { try { if (ModelState.IsValid) { foreach (var files in galleryFilesAdd) { var fileName = Guid.NewGuid().ToString("N"); var extension = Path.GetExtension(files.FileName).ToLower(); string thumbpath, imagepath = ""; using (var img = Image.FromStream(files.InputStream)) { foreach (var caption in viewModel.imagecaption) { var galleryImg = new hotel_gallery_image { hotel_id = hotel.id, thumbPath = String.Format("/Resources/Images/Hotel/GalleryThumb/{0}{1}", fileName, extension), imagePath = String.Format("/Resources/Images/Hotel/Gallery/{0}{1}", fileName, extension), entry_datetime = DateTime.Now, guid = Guid.NewGuid().ToString("N"), enabled = true, image_caption = caption }; db.hotel_gallery_image.Add(galleryImg); } } } await db.SaveChangesAsync(); return RedirectToAction("Index", "Hotel"); } } catch (DbEntityValidationException ex) { string errorMessages = string.Join("; ", ex.EntityValidationErrors.SelectMany(x => x.ValidationErrors).Select(x => x.PropertyName + ": " + x.ErrorMessage)); throw new DbEntityValidationException(errorMessages); } viewModel.Country = await db.countries.ToListAsync(); return View(viewModel); } 

和viewModel

 public string[] imagecaption { get; set; } 

将数据插入数据库

Answer 1

我认为问题出在你的身上

 image_caption = viewModel.imagecaption 

因为您遍历var files in galleryFilesAdd ，所以您在每次迭代时都使用来自viewModel的相同image_caption的引用，因此您需要根据另一个数据（fileName或您viewmodel包含的其他数据）过滤image_caption 。

更新理想情况下，如果ViewModel和文件（例如文件名）中具有相同的属性，则可以执行类似thatimage_caption = viewModel.FirstOrDefault(x=>x.Filename == filename).imagecaption

如果您为Viemodel和galleryFilesAdd类提供代码，那么为了更具体，将会有所帮助。

更新2

在你的情况下，你通过galleryFilesAdd集合在每次迭代中迭代遍历imagecaption数组的整个集合，这会导致数据库中出现双重数据。 如果您可以按顺序为第一个文件截取字幕，请从imagecaption数组中获取第一个元素，依此类推，您可以使用如下代码：

 if (ModelState.IsValid) { int index = 0; foreach (var files in galleryFilesAdd) { var fileName = Guid.NewGuid().ToString("N"); var extension = Path.GetExtension(files.FileName).ToLower(); string thumbpath, imagepath = ""; using (var img = Image.FromStream(files.InputStream)) { if(index < viewModel.imagecaption.Length){ var galleryImg = new hotel_gallery_image { hotel_id = hotel.id, thumbPath = String.Format("/Resources/Images/Hotel/GalleryThumb/{0}{1}", fileName, extension), imagePath = String.Format("/Resources/Images/Hotel/Gallery/{0}{1}", fileName, extension), entry_datetime = DateTime.Now, guid = Guid.NewGuid().ToString("N"), enabled = true, image_caption = viewModel.imagecaption[index] }; db.hotel_gallery_image.Add(galleryImg); index++; } } }