Syncfusion Blazor 파일 업로드 구성 요소에서 이미지 미리 보기
이 블로그에서 Syncfusion Blazor File Upload 구성 요소와 간단한 코드 예시를 사용하여 그림을 편집해서 업로드하기 전에 미리 보기를 보여 줍니다.
사진 업로드 및 미리 보기 지원
이미지 미리 보기는 양식을 편집하는 데 중요한 기능입니다.이 기능을 사용하면 업로드하기 전에 이미지를 검사하여 업로드할 이미지의 정확성을 확보할 수 있습니다.Syncfusion Blazor 파일 업로드 구성 요소에서 이미지 미리 보기 기능을 구현하는 것은 매우 간단합니다.
Blazor 파일로 구성 요소를 업로드하여 이미지 탭에 미리 보기 이미지를 설정하고 표시하는 것이 얼마나 쉬운지 봅시다.
선결 조건
Blazor 파일 업로드에서 이미지 미리 보기를 활성화하려면
ASP를 만듭니다.NET 핵심 관리형 Blazor WebAssembly(WASM) 어플리케이션
필요한 모델 및 컨트롤러 클래스를 먼저 추가하십시오create a Blazor WebAssembly app.이제 이 솔루션에 세 개의 프로젝트 파일을 만들었습니다.
클라이언트: 클라이언트 코드와 브라우저에 나타날 페이지를 포함합니다.
서버: 데이터베이스와 관련된 작업 및 웹 API와 같은 서버 측 코드를 포함합니다.
공유: 클라이언트와 서버에서 접근할 수 있는 공유 코드를 포함합니다.
파일 업로드 구성 요소 추가 및 편집 양식 구성
여기서 SyncfusionTextBox과 File Upload 구성 요소를 포함하는 예술 경연 참가 표를 설계할 것입니다.
1단계: 데이터 폴더에 UserDetails라는 새 모델 클래스를 생성합니다.
public class UserDetails
{
[Required]
public string FirstName { get; set; }
public string LastName { get; set; }
[Required]
[DataType(DataType.EmailAddress)]
[EmailAddress]
public string Email { get; set; }
}
<EditForm OnValidSubmit="@Submit">
</EditForm>
<EditForm Model="@userDetails" OnValidSubmit="@Submit">
</EditForm>
@code {
private UserDetails userDetails = new UserDetails();
}
<div class="d-flex justify-content-center align-items-center container ">
<EditForm Model="@userDetails" OnValidSubmit="@Submit">
<DataAnnotationsValidator />
<h2 class="h3 mb-3 font-weight-normal">Art Competition Entry Form</h2>
<div class="form-row">
<div class="form-group col-md-6">
<label>First Name :</label>
<SfTextBox @bind-Value="@userDetails.FirstName"></SfTextBox>
<ValidationMessage For="@(() => userDetails.FirstName)"></ValidationMessage>
</div>
<div class="form-group col-md-4">
<label>Last Name :</label>
<SfTextBox @bind-Value="@userDetails.LastName"></SfTextBox>
<ValidationMessage For="@(() => userDetails.LastName)"></ValidationMessage>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-10">
<label class="col-form-label">Email ID :</label>
<SfTextBox @bind-Value="@userDetails.Email"></SfTextBox>
<ValidationMessage For="@(() => userDetails.Email)"></ValidationMessage>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-10">
<button class="btn btn-lg btn-primary btn-block" type="submit">Submit</button>
</div>
</div>
</EditForm>
</div>
<div class="form-row">
<div class="form-group col-md-10 control-section">
<label class="col-form-label">Upload Image:</label>
<SfUploader ID="UploadFiles" AllowedExtensions=".png,.jpeg,.jpg">
<UploaderEvents ValueChange="onChange" OnRemove="onRemove"></UploaderEvents>
<UploaderTemplates>
<Template Context="HttpContext">
<table>
<tr>
<td>
<img class="upload-image" alt="Preview Image @(HttpContext.Name)"
src="@(files.Count >0 ? files.Where(item=>item.Name == HttpContext.Name)?.FirstOrDefault()?.Path : string.Empty)">
</td>
<td>
<div style="padding: 7px;">
<h5 title="@(HttpContext.Name)">@(HttpContext.Name)</h5>
<i>@(HttpContext.Size) Bytes</i>
</div>
</td>
</tr>
</table>
<span class="e-icons e-file-remove-btn remove" id="removeIcon" title="Remove"></span>
<span class="e-upload-icon e-icons e-file-remove-btn" title="Upload" id="iconUpload" @onclick="@uploadFile"></span>
</Template>
</UploaderTemplates>
</SfUploader>
</div>
</div>
[HttpPost("[action]")]
public async Task<string> Save()
{
string path = string.Empty;
if (HttpContext.Request.Form.Files.Any())
{
foreach (var file in HttpContext.Request.Form.Files)
{
path = Path.Combine(environment.ContentRootPath, "uploads", file.FileName);
using (var stream = new FileStream(path, FileMode.Create))
{
await file.CopyToAsync(stream);
}
}
}
byte[] ByteArray = System.IO.File.ReadAllBytes(path);
return Convert.ToBase64String(ByteArray);
}
@code {
private UserDetails userDetails = new UserDetails();
public MultipartFormDataContent content;
public string responseStr;
public HttpResponseMessage filepath { get; set; }
List<fileInfo> files = new List<fileInfo>();
public class fileInfo
{
public string Path { get; set; }
public string Name { get; set; }
public double Size { get; set; }
}
public void onChange(UploadChangeEventArgs args)
{
files = new List<fileInfo>();
foreach (var file in args.Files)
{
var pathToSave = Path.Combine(Directory.GetCurrentDirectory(), "Images");
var fullPath = Path.Combine(pathToSave, file.FileInfo.Name);
byte[] bytes = file.Stream.ToArray();
string base64 = Convert.ToBase64String(bytes);
files.Add(new fileInfo() { Path = @"data:image/" + file.FileInfo.Type + ";base64," + base64, Name = file.FileInfo.Name, Size = file.FileInfo.Size });
content = new MultipartFormDataContent {
{ new ByteArrayContent(file.Stream.GetBuffer()), "\"upload\"", file.FileInfo.Name }
};
}
}
}
public async Task uploadFile(MouseEventArgs args)
{
filepath = await Http.PostAsync("https://localhost:44395/api/SampleData/Save", content);
this.responseStr = await filepath.Content.ReadAsStringAsync();
}
public void onRemove(RemovingEventArgs args)
{
foreach (var removeFile in args.FilesData)
{
if (File.Exists(Path.Combine(@"\Images", removeFile.Name)))
{
File.Delete(Path.Combine(@"\Images\", removeFile.Name));
}
}
}
파일 업로드 구성 요소의 이미지 미리 보기GitHub 예
이 GitHub 저장소에서 이 예의 전체 소스 코드를 다운로드할 수 있습니다.
결론
Syncfusion BlazorFile Upload 구성 요소를 사용하여 편집 양식에 이미지 미리 보기 기능을 쉽게 추가하고 표시하는 방법을 알고 싶습니다.이 기능은 편집 양식에 이미지를 업로드하기 전에 이미지와 해당 품질을 확인하는 데 도움이 됩니다.템플릿 옵션을 사용하여 미리 보기를 쉽게 사용자 정의할 수도 있습니다.
그래서 이 블로그 글에서 제공한 프로그램을 시도해 보고 다음 평론 부분에 피드백을 남겨보세요.
Syncfusion’s Blazorsuite는 소프트웨어 패키지에서 웹에 65개의 고성능, 경량, 응답이 빠른 UI 구성 요소를 제공합니다. 파일 형식 라이브러리를 포함합니다.그것들을 사용하여 매혹적인 웹 응용 프로그램을 구축합니다!
다운로드free 30-day trial 또는 NuGet package를 통해 Blazor 구성 요소를 시도합니다.Dell online examples 및 documentation 에서 사용할 수 있는 추가 기능을 확인하십시오.
저희support forums, Direct-Trac 또는 feedback portal를 통해서도 저희에게 연락하실 수 있습니다.우리는 언제든지 기꺼이 당신을 돕겠습니다!
Reference
이 문제에 관하여(Syncfusion Blazor 파일 업로드 구성 요소에서 이미지 미리 보기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/syncfusion/how-to-preview-images-in-syncfusion-blazor-file-upload-component-3ohn텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
