将 javascript 图像 blob 保存到 ASP.NET Core 控制器
Posted
技术标签:
【中文标题】将 javascript 图像 blob 保存到 ASP.NET Core 控制器【英文标题】：Saving javascript image blob to ASP.NET Core Controller 【发布时间】：2018-12-14 15:23:33 【问题描述】：早安，
我正在尝试将 javascript blob 图像发送到我在 ASP.NET Core 中的控制器方法，但它没有发送到我的控制器。
我的画布上有一张图片，它是 dataUri 以便能够将其转换为 javascript blob，我正在使用以下代码：
dataURItoBlob(dataURI)
// convert base64 to raw binary data held in a string
// doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
var byteString = atob(dataURI.split(',')[1]);
// separate out the mime component
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
// write the bytes of the string to an ArrayBuffer
var ab = new ArrayBuffer(byteString.length);
// create a view into the buffer
var ia = new Uint8Array(ab);
// set the bytes of the buffer to the correct values
for (var i = 0; i < byteString.length; i++)
ia[i] = byteString.charCodeAt(i);
// write the ArrayBuffer to a blob, and you're done
var blob = new Blob([ab], type: mimeString );
return blob;
// Then in my save method here are my javascript codes:
const fileImage = this.dataURItoBlob(myDataUriImage);
axios.post(`Info/Create`, fileImage ,
headers:
"Content-Type": "multipart/form-data"
)
这是我的简单 ASP.NET Core 控制器方法
public async Task<IActionResult> Create([FromBody]IFormFile fileImage)
...
有什么帮助吗？
【问题讨论】：
【参考方案1】：要通过 AJAX 发布文件，您需要 FormData JS 类。
var formData = new FormData();
formData.append('fileImage', fileImage);
然后，您提交 formData 而不是 fileImage 作为帖子中的数据。
请记住，通过 AJAX 提交文件需要 html5，因此需要现代浏览器。这似乎不是问题，因为您已经在大量使用文件 API，它也是 HTML5。请注意，这些都不适用于 IE10 或更低版本。
此外，这仅适用于您在此处使用的 multipart/form-data mime 类型的请求。作为参考，如果要发送 JSON，则需要将文件编码为 Base64 字符串并作为 JSON 对象的另一个成员发送。在服务器端，您需要绑定到byte[] 而不是IFormFile。
【讨论】：
【参考方案2】：<html>
<head>
<style>
.fs-upload-target
background: #fff;
border: 3px dashed #607d8b;
border-radius: 2px;
color: #455a64;
font-size: 14px;
margin: 0;
padding: 25px;
text-align: center;
-webkit-transition: background .15s linear,border .15s linear,color .15s linear,opacity .15s linear;
transition: background .15s linear,border .15s linear,color .15s linear,opacity .15s linear;
img
width: 100%;
height: auto;
</style>
<script>
function openDialogue()
document.getElementById('upload_file').click();
function preview_image()
var total_file = document.getElementById("upload_file").files.length;
for (var i = 0; i < total_file; i++)
$('#image_preview').append("<div class='col-md-3'><img src='" + URL.createObjectURL(event.target.files[i]) + "'></div>");
</script>
</head>
<body>
<div>
<form action="upload_file.php" method="post" enctype="multipart/form-data">
<input type="file" id="upload_file" name="upload_file[]" style="display:none" accept="image/*" onchange="preview_image();" multiple />
<div id="dropTarget" onclick="openDialogue()" class="fs-upload-target">
Drop some files here
</div>
</form>
<div class="form-group">
<div id="image_preview" class="table img-responsive table-responsive"></div>
</div>
</div>
</body>
</html>【讨论】：
对不起，这个答案没有解决问题。以上是关于将 javascript 图像 blob 保存到 ASP.NET Core 控制器的主要内容，如果未能解决你的问题，请参考以下文章
如何将图像转换为 Base64 字符串，并转换回图像，保存到 azure blob