将JavaScript图像Blob保存到ASP.NET Core Controller

时间:2018-07-06 04:57:40

标签: javascript c# asp.net-core asp.net-core-2.0 axios

美好的一天

我正在尝试将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)
{
 ...
}

请帮忙吗?

2 个答案:

答案 0 :(得分:0)

要通过AJAX发布文件,您需要FormData JS类。

var formData = new FormData();
formData.append('fileImage', fileImage);

然后,您提交formData而不是fileImage作为帖子中的数据。

请记住,通过AJAX提交文件需要HTML5,因此需要现代的浏览器。这似乎不是问题,因为您已经在大量使用File API,它也是HTML5。请注意,所有这些都无法在IE10或更低版本的系统中工作。

此外,这仅适用于使用multipart/form-data哑剧类型的请求。作为参考,如果要发送JSON,则需要将文件编码为Base64字符串,并仅作为JSON对象的另一个成员进行发送。然后,在服务器端,您需要绑定到byte[]而不是IFormFile

答案 1 :(得分:0)

>>> s = pd.Series([0, 1, np.nan, 3])
>>> s
0    0.0
1    1.0
2    NaN
3    3.0
dtype: float64
>>> s.interpolate()
0    0.0
1    1.0
2    2.0
3    3.0
dtype: float64