У меня есть модальное окно, которое должно принимать несколько входных файлов изображений, которые классифицируются по зонам.
<div class = "modal" tabindex = "-1" role = "dialog" id = "thumbnailsModal">
<div class = "modal-dialog modal-lg" role = "document">
<div class = "modal-content">
<div class = "modal-header">
<h5 class = "modal-title">Manage Flyer Thumbnails</h5>
</div>
<div class = "modal-body">
<div class = "row">
<div class = "col-6">
@if (firstPage == null)
{
<p>Flyer needs at least one page to be able to add thumbnails</p>
}
else
{
<RadzenGrid @ref = "grid" Style = "height:395px;color:#000000;" Data = "@thumbnails" AllowPaging = "false" PageSize = "5" AllowFiltering = "false" AllowSorting = "true" TItem = "Thumbnail" RowSelect = "@ThumbnailSelected" EditMode=DataGridEditMode.Single Value = "@firstThumbnail">
<Columns>
<RadzenGridColumn TItem = "Thumbnail" Property = "RowNumber" Title = "#" Context = "data" Type = "integer" Width = "25px" Visible = "false">
<Template>
@data.RowNumber
</Template>
</RadzenGridColumn>
<RadzenGridColumn TItem = "Thumbnail" Property = "Zone" Title = "Zone" Context = "data" Type = "text" Width = "125px">
<Template>
@data.Zone
</Template>
</RadzenGridColumn>
<RadzenGridColumn TItem = "Thumbnail" Property = "Filename" Title = "Filename" Context = "data" Type = "text" Width = "125px">
<Template>
@data.Filename
</Template>
</RadzenGridColumn>
</Columns>
</RadzenGrid>
}
</div>
<div class = "col-6">
@if (!string.IsNullOrEmpty(selectedZone))
{
@if (!@isDeleteButtonDisabled)
{
@*<img height = "600" width = "600" src = "api/thumbnail/@Flyer.Id/@pageId/@selectedZone" />*@
<img height = "600" width = "600" src=@imagePath />
<br />
}
<BlazorInputFile.InputFile id = "inputFile" multiple OnChange = "@SetImage" />
@* <RadzenUpload Multiple = "true" Url = "upload/multiple" Change = "@SetImage" Class = "w-100" />*@
@if (!@isDeleteButtonDisabled)
{
<br />
<br />
<input type = "button" class = "btn btn-secondary" value = "Delete" @onclick = "Delete" disabled=@isDeleteButtonDisabled />
}
}
</div>
</div>
</div>
<CoralUI.Dialog Title = "@errorTitle" Content = "@errorContent" @ref = "errorDialog" />
<div class = "modal-footer">
<button type = "button" class = "btn btn-secondary" data-dismiss = "modal">Close</button>
</div>
Я пытаюсь добиться того, чтобы при загрузке одного или нескольких файлов файлы сопоставлялись с соответствующей зоной по имени файла, как показано здесь в моем методе набора изображений.
async Task SetImage(IFileListEntry[] files)
{
foreach (var file in files)
{
foreach (var thumbnail in thumbnails)
{
if (file.Name.Contains(thumbnail.Zone.ToString()))
{
thumbnail.Filename = file.Name;
thumbnail.Image = file.Data;
await Save();
}
}
}
isDeleteButtonDisabled = false;
StateHasChanged();
}
Затем я сохраняю значения путей к изображениям для каждой зоны в словаре и пытаюсь их назначить.
private async Task Save()
{
try
{
foreach (var thumbnail in thumbnails)
{
await FlyerRepository.DeleteDataOneAsync(Flyer.Id, pageId, thumbnail.Zone);
var metadata = new FlyerMetadata
{
PageId = pageId,
FlyerId = Flyer.Id,
Zone = thumbnail.Zone
};
await FlyerRepository.SaveDataAsync(thumbnail.Filename, thumbnail.Image, metadata);
imagePath = string.Format("api/thumbnail/{0}/{1}/{2}/{3}", Flyer.Id, pageId, thumbnail.Zone, DateTime.Now.ToString().Replace(" ", "_"));
ImagePathValues.Add(thumbnail.Zone, imagePath);
}
foreach (var thumbnail in thumbnails)
{
foreach (var path in ImagePathValues)
{
if (thumbnail.Zone == path.Key)
{
imagePath = path.Value;
}
}
}
}
catch (Exception exception)
{
errorTitle = "Error saving thumbnail.";
errorContent = exception.Message;
errorDialog.Open();
}
}
К сожалению, я не могу правильно сохранить, и мой путь к изображению не показывает мою миниатюру. Я не могу понять, как решить эту проблему. Любая помощь будет оценена по достоинству!
Я думаю, вам по крайней мере понадобится тег img для отображения изображения. У меня есть приложение Blazor, которое показывает изображения из облачного источника, используя URL-адрес.
<img class = "deviceimage"
src = "@preview?.SourceUrl"
@onclick = "@(() => ImageClicked(@preview?.SourceUrl))" />