如何使用javascript将blob作为文件POST

How to POST blob as a file using javascript?

本文关键字：文件 POST blob 何使用 javascript      更新时间：2023-09-26

我有一个表单，其中包含两个输入，一个是用name="action"隐藏的，另一个是name="avatar"type="file"。在用户选择化身输入中的文件之后，图像转换为blob。我如何发布blob，就像它被加载为文件并提交后一样？

形式：

<form enctype="multipart/form-data" method="post" id="avatarform">
    <input type="hidden" name="action" value="save" />
    <input id="coolButton" name="avatar" type="file" accept="image/*" class="form-control" placeholder="">
</form>

我试过了：

var fd = new FormData();
fd.append('action', 'save');
fd.append('avatar', file.name);
fd.append('data', blob);
$.ajax({
    type: 'POST',
    url: '/',
    data: fd,
    processData: false,
    contentType: false
}).done(function(data) {
       console.log(data);
});

php控制器：

    if ($_FILES['avatar']['name']) {
        if ($profile->avatar==1) {
            unlink('/images/avatars/'.$profile->avatar);
            $profile->avatar=0;
        }
        $filename="avatar_".$user_id.'.'.pathinfo($_FILES['avatar']['name'], PATHINFO_EXTENSION);
        move_uploaded_file($_FILES['avatar']['tmp_name'],$_SERVER['DOCUMENT_ROOT'] ."/images/avatars/".$filename);
        $profile->avatar=$filename;
    }

但php控制器不会保存它。如果我使用没有脚本的表单，它会将图像转换为blob，效果很好，可以保存文件。

我已经更新了脚本

fd.append('blob', blob.replace("data:image/png;base64,", "")
fd.append('ext', "jpg") // send ext of uploaded file

和php控制器

    if ($_POST['blob']) {
        if ($profile->avatar==1) {
            unlink('/images/avatars/'.$profile->avatar);
            $profile->avatar=0;
        }
        $file = base64_decode($_POST['blob']);
        $filename="avatar_".$user_id.'.'.$_POST['ext'];
        file_put_contents($_SERVER['DOCUMENT_ROOT'] ."/images/avatars/".$filename, $file);
        $profile->avatar=$filename;
    }
相关文章：