有一个任务。该页面有input type file. 用户向其添加图像。有了FileReader它,它被转换为 base64 并插入到img src. 页面上显示图像。结果,我将它传输到服务器并保存到数据库中。并且以后在编辑记录时,这个base64字符串会被传输到客户端,必须再次插入,img src这样用户才能看到编辑后的记录有什么图片。为了快速测试,我仍然有 1 个控制器,base64 字符串传递到该控制器并立即返回。有2张测试图片,更大和更小。两者都在访问ajax请求中发送到客户端,但是尝试插入时较大的那个会src崩溃并出现错误,而较小的那个被插入,但几乎整个cortina都模糊了。
JS:
//Добавление нового автомобиля
$('#modalWindow').on('click', '#btnConfirm', function () {
$.ajax({
type: "POST",
url: "/Home/_AddNewCar",
data: $('form').serialize() + "&base64img=" + $('#autoPicture').attr('src'),
success: function (data) {
$('#autoPicture').attr('src', data);
},
error: function (error) {
alert(error.responseText);
}
});
});
//Изменение содержимого загружаемого файла
$('#modalWindow').on('change', '#fileLoader', function () {
ReadImageUrl(this);
});
function ReadImageUrl(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.readAsDataURL(input.files[0]);
reader.onload = function (e) {
$('#autoPicture').attr('src', e.target.result);
}
}
else {
$('#autoPicture').attr('src', '');
}
}
控制器:
[HttpPost]
public String _AddNewCar(Car car, string base64img)
{
return base64img;
}
初始图像:
因此,对于第一个较大的,当尝试插入 src 时,会出现这样的错误:
而且根据第二张图,没有报错,但是将base64插入src后,结果是这样的:
请告诉我,可能是什么问题?毕竟,我什至不对字符串做任何事情,我立即将其发送回去。




将数据直接传输到服务器时,字符串中必须只出现 url 中允许的字符。
serialize()form 函数会自动执行此操作。但是 base64 字符串可能包含必须在传输时适当编码的无效字符。这是使用 JS 函数完成的encodeURIcomponent: