问题描述: 在Angular和ASP.NET应用程序中,我试图从base64字符串创建一个图像并将其上传到服务器。但是,当我尝试将base64字符串转换为图像对象时,我遇到了问题。以下是我的代码示例:
Angular代码:
uploadImage(base64String: string) {
const byteCharacters = atob(base64String);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
const blob = new Blob([byteArray], { type: 'image/png' });
const formData = new FormData();
formData.append('image', blob, 'image.png');
this.http.post('https://example.com/upload', formData).subscribe(
response => {
console.log('Image uploaded successfully');
},
error => {
console.error('Image upload failed');
}
);
}
ASP.NET代码:
[HttpPost]
public IActionResult Upload(IFormFile image)
{
// Handle the uploaded image here
return Ok();
}
但是,当我尝试上传图像时,我收到以下错误消息:
415 Unsupported Media Type
解决方法: 此问题通常是由于未正确设置请求头的原因导致的。请尝试以下解决方法:
在Angular代码中添加请求头Content-Type: multipart/form-data
,以确保正确设置请求类型。
import { HttpHeaders } from '@angular/common/http';
uploadImage(base64String: string) {
const byteCharacters = atob(base64String);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
const blob = new Blob([byteArray], { type: 'image/png' });
const formData = new FormData();
formData.append('image', blob, 'image.png');
const headers = new HttpHeaders();
headers.append('Content-Type', 'multipart/form-data');
this.http.post('https://example.com/upload', formData, { headers }).subscribe(
response => {
console.log('Image uploaded successfully');
},
error => {
console.error('Image upload failed');
}
);
}
在ASP.NET代码中,确保在[HttpPost]
属性上使用[Consumes("multipart/form-data")]
属性来指示控制器接受multipart/form-data的请求。
[HttpPost]
[Consumes("multipart/form-data")]
public IActionResult Upload(IFormFile image)
{
// Handle the uploaded image here
return Ok();
}
通过上述步骤,您应该能够解决无法从base64上传创建的图像的问题,确保请求头和控制器属性正确设置。