0

似乎有很多关于此的帖子，但在其中找不到解决方案，我已经碰壁了。帮助，亲爱的堆垛机！

我正在编写一些代码，让用户选择个人资料图片，对其进行裁剪，然后将裁剪后的图像保存在服务器上。我正在使用 Cropper.js 库来处理实际的裁剪并确定它正在工作，因为我可以使用以下代码实时显示裁剪：

var imageData = cropper.getCroppedCanvas().toDataURL();
var profileimage = document.getElementById('myProfilePhoto');
profileimage.src = imageData;

现在我想将裁剪后的图像发送到服务器，最好的方法似乎是创建一个 blob 和 Ajax 到一个 php 脚本来处理它。

cropper.getCroppedCanvas().toBlob(function (blob) {
    var formData = new FormData();
    formData.append('file', blob);
    formData.append('uuid', '{a unique identifier}');
    $.ajax({
         type:           'POST',
         url:            '{the php script}',
         data:           formData,
         processData:    false,
         contentType:    false,
         success: function (response) {
             console.log('Upload success: '+response);
         },
         error: function () {
             console.log('Upload error');
         }
    });
});

在这个阶段，我只是将我的 php 脚本放到 var_dump($_REQUEST) 中，这样我就可以在控制台中看到脚本认为它得到了什么。但是，响应只是发回默认的 $_REQUEST 对象，例如 PHPSESSID，没有文件或 uuid 输入。

我究竟做错了什么？

在此先感谢您的任何指点。

4

2 回答 2

0

所以答案很简单，但很难找到。

我的服务器有一个 .htaccess 重写规则，它会自动更改 www。地址指向非 www 版本，显然我已经愚蠢到包含 www。在我调用的 URL 中，在这些情况下似乎足以剥离 $_POST 数据。

所以 FormData() 和 blob 在这里都是红鲱鱼 - 这只是一个重定向这就是原因。

于 2017-11-06T17:07:26.197 回答
0

如果您通过邮寄方式发送以查看请求，请输入此代码

 var formData = new FormData();
formData.append('file', blob);
formData.append('uuid', '{a unique identifier}');
formData.append('_method', 'PATCH'); <---add this and you're good to go
于 2017-11-06T14:30:36.740 回答