vue elment-ui 一张与多张图片上传,返回base64编码 thinkphp5

注意:
action为上传的后台路径地址
imageUrl: 为图像的路径
accept:上传的图片格式可以自定义
$emit:操作后返回对应的数据给父级vue
一张图片只给一个路径,
多张图片需要给一个数组

1.element-UI 头像上传,返回一条路径

vue代码







thinkphp后台图片上传实现返回上传的路径地址

public function uploadico(){
        // 获取表单上传文件
        $file = request()->file('files');
        if (empty($file)) {
            $this->error('请选择上传文件');
        }
        // 移动到框架应用根目录/public/uploads/ 目录下
        $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
        if ($info) {
//            $this->success('文件上传成功');
            $sql = $info->getSaveName();
            $avator=str_replace('\\','/',$sql);
            $dk = substr($_SERVER['HTTP_HOST'],-4);
            $sql =  "http://localhost:".$dk."/uploads/".$avator;//路径地址可以自己更改
            echo json_encode($sql,JSON_UNESCAPED_SLASHES);

        } else {
            // 上传失败获取错误信息
            $this->error($file->getError());
        }
    }
  //    删除图片数据删除文件
    public function files_edit()
    {
        $info_del = input('post.url');
        $result = substr($info_del,strripos($info_del,"uploads"));
        if($result){
            $myFile = $result;
            $fh = fopen($myFile, 'w') or die("can't open file");
            fclose($fh);

            $myFile = $result;
            unlink($myFile);
        }
        echo json_encode(array("status"=>200,"msg"=>"修改成功"));
//        $this->dele_all_data('files',array('belong_id'=>input('post.belong_id'),'name'=>input('post.name')));

    }

2.element-UI 图片墙或者文件上传,返回路径,上传的后台php与上传一张公用一个方法,






3.element-UI 上传后返回为base64一张图片编码。该出使用了查看功能,没有后台代码。






4.vue element 多张图片返回base64






你可能感兴趣的:(ThinkPHP,HTML+CSS,element,Vue,vue,elment-ui,base,thinkphp5,vue图片base)