Javascript Blob到文件/通过Ajax请求发送文件
在一个Express应用程序中,我有一个简单的图像上传程序,它使用Ajax PUT请求工作得非常好。但现在我需要在将图像发送到服务器之前对其进行裁剪 我接通了电源以帮助解决这个问题。在FormSubmit上,我从Croppie获取裁剪过的图像块,将它们转换为文件,将文件附加到Ajax FormData对象,并将FormData发送到Express 但是服务器没有接收和发送文件,并且在Chrome的开发工具中检查PUT请求表明没有发送任何文件信息 我已经记录了blob和文件,据我所知,它们是正确创建的 获取blob并将其转换为文件:Javascript Blob到文件/通过Ajax请求发送文件,javascript,jquery,ajax,node.js,express,Javascript,Jquery,Ajax,Node.js,Express,在一个Express应用程序中,我有一个简单的图像上传程序,它使用Ajax PUT请求工作得非常好。但现在我需要在将图像发送到服务器之前对其进行裁剪 我接通了电源以帮助解决这个问题。在FormSubmit上,我从Croppie获取裁剪过的图像块,将它们转换为文件,将文件附加到Ajax FormData对象,并将FormData发送到Express 但是服务器没有接收和发送文件,并且在Chrome的开发工具中检查PUT请求表明没有发送任何文件信息 我已经记录了blob和文件,据我所知,它们是正确创
var fileList = []
if($croppieContainers.length > 0){
$.each($croppieContainers, function(i){
$(this).croppie('result', {
type: 'blob', // Get the blob from the croppie container
}).then(function(blob) {
let file = new File([blob], "image-" + i, {
type: blob.type,
lastModifiedDate: new Date(); // Make a file from the blob...
});
fileList.push(file) // And push it to fileList
});
});
}
将文件附加到ajaxData:
if(fileList.length > 0) {
$.each('fileList', function(file){
ajaxData.append($input.attr('name'), file);
})
}
邮寄至快递:
$.ajax({
url: $form.attr('action'),
type: $form.attr('method'),
data: ajaxData,
// dataType: 'json',
cache: false,
contentType: false,
processData: false,
complete: function() {
$form.removeClass('is-uploading');
},
success: function(data) {
// Handlers...
Console.log(blob)返回:
和文件:
File
lastModified : 1478972364233
lastModifiedDate : Sat Nov 12 2016 17:39:24 GMT+0000 (GMT)
name : "image-0"
size : 288345
type : "image/png"
webkitRelativePath : ""
__proto__ : File
我尝试以不同的方式获取该文件,但结果相同:
if($croppieContainers.length > 0){
$.each($croppieContainers, function(i){
let file = new File([$(this).croppie('result', {
type: 'blob'}
)],
"image-" + i)
ajaxData.append($input.attr('name'),file)
});
}
除了在各个阶段进行console.logging和在dev工具中检查XHR之外,我还知道如何调试它
有没有人能看到问题所在,或者告诉我如何进一步调试
谢谢你
if($croppieContainers.length > 0){
$.each($croppieContainers, function(i){
let file = new File([$(this).croppie('result', {
type: 'blob'}
)],
"image-" + i)
ajaxData.append($input.attr('name'),file)
});
}