Question

所以我在Vue JS中上传了一张图片，然后将POST请求发送到Laravel路线。图像被上传，保存在本地，然后发送到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的原始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字符串返回图片网址，但其为空。

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

        $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);

Answer 1

我通过添加

弄清楚了

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

到我的CURL代码。但是现在我想我必须回过头来重新工作我创建的原始Guzzle程序包，该程序包只能在常规的旧PHP / HTML中工作。

Vue JS Axios发布请求，将空值发送到PHP

1 个答案: