tp5+vue上传图片一直提示跨域问题解决方案

   一直使用tp5框架和vue做项目,之前有遇到过图片上传跨域问题,解决跨域以后项目正常,于是也就没有注意后续代码重用的时候一直报跨域问题,耽误了好久现在想通过博客的方式将其记录下来,第一次写博客不喜勿喷。
   话不多说直接看效果,后端代码!
   [在这里插入图片描述](https://img-blog.csdnimg.cn/20190415140428836.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDc1ODQ3OQ==,size_16,color_FFFFFF,t_70)

使用form表单上传图片没有问题,但是使用vue的el-uplode一直是跨域问题,各种解决跨域的方案都使用过了没有效果,后面经过多方便的排查发现,在tp5.1和5.0上传图片上面有个细微的差别,5.1上传图片实例

public function upload(){
    // 获取表单上传文件 例如上传了001.jpg
    $file = request()->file('image');
    // 移动到框架应用根目录/uploads/ 目录下
    $info = $file->move( '../uploads');
    if($info){
        // 成功上传后 获取上传信息
        // 输出 jpg
        echo $info->getExtension();
        // 输出 20160820/42a79759f284b767dfcb2a0197904287.jpg
        echo $info->getSaveName();
        // 输出 42a79759f284b767dfcb2a0197904287.jpg
        echo $info->getFilename(); 
    }else{
        // 上传失败获取错误信息
        echo $file->getError();
    }
}

下面是5.0实例

public function upload(){
    // 获取表单上传文件 例如上传了001.jpg
    $file = request()->file('image');
    
    // 移动到框架应用根目录/public/uploads/ 目录下
    if($file){
        $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
        if($info){
            // 成功上传后 获取上传信息
            // 输出 jpg
            echo $info->getExtension();
            // 输出 20160820/42a79759f284b767dfcb2a0197904287.jpg
            echo $info->getSaveName();
            // 输出 42a79759f284b767dfcb2a0197904287.jpg
            echo $info->getFilename(); 
        }else{
            // 上传失败获取错误信息
            echo $file->getError();
        }
    }
}

两个实例在form表单上传图片都没有问题,但是使用el-uplode上传图片的时候5.1就会一直报跨域问题。
其实连个代码就差在对 $file = request()->file(‘image’);这个的判断上面,只要加上

    $file = request()->file('image')
    if($info){
    .
    .
    .    
   }

就可以完美的解决了,这就我使用tp5+vue上传图片的时候遇到的坑,希望对大家有所帮助,大家如果有什么意见或者建议可以留言交流

Logo

前往低代码交流专区

更多推荐