Vue JS Axios Post 请求向 PHP 发送 Null答案

【问题标题】：Vue JS Axios Post Request Sending Null to PHPVue JS Axios Post 请求向 PHP 发送 Null
【发布时间】：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);

【问题讨论】：

标签： php json vue.js

【解决方案1】：

我想通了添加

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

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

【讨论】：