我有一個 base64 格式的影像。Convert.ToBase64String(Image)它是在我的控制器中編碼的。我的問題是，通過使用 JavaScript，我如何將已經加載的影像從 img 元素插入到輸入元素中，以便我可以在控制器中接收它。我想我需要以某種方式對其進行解碼，創建一個新的影像檔案，然后將該檔案推送到 input.files 中，但經過多次嘗試我找不到如何。我在javascript方面沒有很多經驗，所以如果有人幫助我，我將不勝感激。
<img id="mainImage" src="data:image;base64,@Model.ImageInBase64">
<input asp-for="Image" id="mainImageInput" style="display:none" type="file" onchange="readURL(this,'mainImage')" accept="image/jpeg, image/png" class="form-control"/>
我的視圖模型具有以下兩個屬性：
[Required]
public IFormFile Image { get; set; }
public string? ImageInBase64 { get; set; }
對于更多背景關系，我將所有影像保存在資料庫中作為位元組 []。
uj5u.com熱心網友回復：
您需要將 base64 影像轉換為檔案，然后用于DataTransfer接收檔案。您可以嘗試我的示例代碼，如下所示。
@{
ViewData["Title"] = "Home Page";
}
@model Net5_MVC.Controllers.HomeController.mainImageInput
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script>
function dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, { type: mime });
}
function ConvertClick(base64url) {
var file = dataURLtoFile(base64url, "test.png");
let container = new DataTransfer();
container.items.add(file);
document.querySelector('#mainImageInput').files = container.files;
var newfile = document.querySelector('#mainImageInput').files[0];
}
</script>
<div class="text-center">
<h1 class="display-4">Welcome</h1>
<p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>
<img id="mainImage" style="width:200px;height:160px" src="@Model.ImageInBase64">
<input asp-for="Image" id="mainImageInput" style="display:none" type="file" accept="image/jpeg, image/png" class="form-control" />
<button onclick="ConvertClick('@Model.ImageInBase64')">Convert</button>
測驗結果：
uj5u.com熱心網友回復：
我不確定我是否理解正確。但是您可以使用將 Base64 解碼回輸入
const reader = new FileReader();
? reader.onload = (evt) => {
? setFile(evt.target.result);
? }
reader.readAsDataURL(base64_here'));
???
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/444069.html
標籤：javascript jQuery 网 asp.net-mvc asp.net 核心
上一篇：如何使用FormData將檔案提交到MVCAction
下一篇：baseurl64緩沖區解碼