Vue JS Axios Post 请求向 PHP 发送 Null

Posted 2023-02-22

【中文标题】Vue JS Axios Post 请求向 PHP 发送 Null

【英文标题】：Vue JS Axios Post Request Sending Null to PHP

【发布时间】：2019-04-26 12:22:23

【问题描述】：

所以我在 Vue JS 中上传了一张图片，并将 POST 请求发送到 Laravel Route。图像被上传，保存在我的本地并发送到 API。 API 请求在客户端返回其 JSON 响应（如预期的那样）但我无法在 php 上对这个响应做任何事情，它在 PHP 中返回 null。我只能看到 JSON 响应客户端，这很奇怪。这几天我一直在尝试解决这个问题。

这是我上传图片的Vue JS代码：

let token = document.head.querySelector('meta[name="csrf-token"]');
    export default
        data()
            return 
                image: ''
            
        ,
        methods: 
            onFileChange(e) 
                let files = e.target.files || e.dataTransfer.files;
                if (!files.length)
                    return;
                this.createImage(files[0]);
            ,
            createImage(file) 
                let reader = new FileReader();
                let vm = this;
                reader.onload = (e) => 
                    vm.image = e.target.result;
                ;
                reader.readAsDataURL(file);
            ,
            upload()
                    let formData = new FormData();
                    formData.append('image', this.image);
                    console.log(this.image) ;
                    axios.post( 'nova-vendor/ad-asset-upload/add',
                     formData,
                    
                        headers: 
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': token.content
                                
                    
                    ).then(function (response)
                            console.log(response);
                        )
                        .catch(function()
                        console.log('FAILURE!!');
                    );
                ,
            
        

Vue JS 返回一个 base64 图像，我在 PHP 控制器中将其转换为 jpg 或 png 并上传到 API / 本地。我在客户端看到这样的响应：

"error":false,"size":27410,"filename":"yJCH2T","ext":"png","url":"https://vgy.me/u/yJCH2T","image":"https://vgy.me/yJCH2T.png","delete":"https://vgy.me/delete/eGGhib4gPY2a"

在 PHP 中，无论我做什么，我都无法获取 JSON 数据，但是当我在没有 Larval 或 Vue 的 vanilla php 上复制我的步骤时，我可以获得 JSON。

这是我将 base64 字符串转换为图像后的 PHP 代码。

 $ch = curl_init('https://vgy.me/upload');
    $file = new CURLFile($file, $type, $filename );
    $data = array('file' => $file, 'title' => 'Beautiful Flowers', 'description' => 'A beautiful photo of flowers at the local park.');
    curl_setopt($ch, CURLOPT_POST, 1);
    curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
    $ok =  curl_exec($ch);
    $json = json_decode($ok, true);

所以我希望$json['image'] 从 JSON 字符串返回图像 url，但它是 null。

如果您想知道我的图像转换逻辑，那就是......

        $data = $request->input('image');
        $pos  = strpos($data, ';');
        $type = explode(':', substr($data, 0, $pos))[1];
        $folderPath = "storage/";
        $image_parts = explode(";base64,", $request->input('image'));
        $image_type_aux = explode("image/", $image_parts[0]);
        $image_type = $image_type_aux[1];
        $image_base64 = base64_decode($image_parts[1]);
        if ( $type == "image/jpeg" || $type == "image/jpg")

            $file = $folderPath . uniqid() . '.jpg';
            $filename = uniqid() . '.jpg';
         else if ( $type == "image/png" ) 
        

            $file = $folderPath . uniqid() . '.png';
            $filename = uniqid() . '.png';
        
        $img = file_put_contents($file, $image_base64);

【参考方案1】：

我想通了添加

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

到我的 CURL 代码。但现在我想我必须回去重做我创建的原始 Guzzle 包，它只能在普通的旧 PHP / html 中运行。