设置上传图片至腾讯云对象储存[layedit转editormd中遇到的一些坑]

文章 > 设置上传图片至腾讯云对象储存[layedit转editormd中遇到的一些坑]

02:10 2019/11/03 1094

设置上传图片至腾讯云对象储存[layedit转editormd中遇到的一些坑]

###【tp5集成上传图片至腾讯云对象储存】
前段时间看到群里在讨论对象储存，我隐约记得我有一次阿里云买了一年9块钱，好像腾讯也有，上去看了下，两个的流量都是另算价格的，但是看腾讯云的时候是比较惊喜的大概原因就是……
![](https://skapi-1253927675.cos.ap-guangzhou.myqcloud.com/blog/201911/eb8f81e30475f61fe19cf9cb805b850e.png)
嗯，这个简直让我受宠若惊，嗯……讲真我确实开心了好久，这个消息是一月份的，现在时间是2019年11月3日 01:08:47，我登进去还提示这个消息。本着节约为本，这个得用上，于是赶紧撸一波文档。
说实话，api文档我确实没看懂，内容也比较多，找找demo以鹅厂这种大型厂家一定会有相关demo，看了下可以用composer安装，安装完后看下面的快速入门。
初始化
```php
$secretId = "COS_SECRETID"; //"云 API 密钥 SecretId";
$secretKey = "COS_SECRETKEY"; //"云 API 密钥 SecretKey";
$region = "ap-beijing"; //设置一个默认的存储桶地域
$cosClient = new Qcloud\Cos\Client(
    array(
        'region' => $region,
        'schema' => 'https', //协议头部，默认为http
        'credentials'=> array(
            'secretId'  => $secretId ,
            'secretKey' => $secretKey)));
```
后面有对储存桶的操作，但是这个可以省略，因为基本很少对储存桶操作，所以腾讯云后台直接操作就ok了，而且还可以设置防盗链什么的，有个注意点一定要注意，权限要设置公有读私有写，如果私有读，那么传上去的图片的链接放咱们网页中，是无法显示的。下面我们直接看关于对象操作的，有个上传对象操作

**上传对象**
使用 putObject 接口上传文件（最大5G）。
使用 Upload 接口分块上传文件，Upload 接口为复合上传接口，对小文件进行简单上传，对大文件进行分块上传。
```php
### 上传文件流
try {
    $bucket = "examplebucket-1250000000"; //存储桶名称 格式：BucketName-APPID
    $key = "exampleobject";//文件名（后来在腾讯云后台发现的）
    $srcPath = "F:/exampleobject";//本地文件绝对路径
    $file = fopen($srcPath, "rb");
    if ($file) {
        $result = $cosClient->putObject(array(
            'Bucket' => $bucket,
            'Key' => $key,
            'Body' => $file));
        print_r($result);
    }
} catch (\Exception $e) {
    echo "$e\n";
}
```
我当时只用了这个方法，这个参数当然要改成自己的参数。在这里我有个疑问，它的这个本地文件绝对路径，我先在想是不是得先传服务器，然后服务器再上传过去，这样的话，还得删掉服务器的文件感觉有点麻烦，不过后来发现了一个意外惊喜，我项目用的tp5，自带的有个
`$file = $this->request->file('file');`
实测这个方法可用，直接传入腾讯云对象储存得到sdk中，成功上传至腾讯云。虽然我也没明白什么情况。当然获取那个‘file’这个是layedit上传图片的标签name值。
```php
        if ($file == null){
            $file = $this->request->file('file');
        }
        $region = $this->region;
        $secretId = $this->secretId;
        $secretKey = $this->secretKey;
        $backet = $this->backet;
        $cosClient = new Client(array('region' => $region,
            'schema' => 'http', //协议头部，默认为http
            'credentials'=> array(
                'secretId'  => $secretId ,
                'secretKey' => $secretKey)
        ));
        ### 上传文件流
        try {
            $bucket = $backet; //存储桶名称 格式：BucketName-APPID
            $Extension = substr($file->getInfo()['name'],strrpos($file->getInfo()['name'],"."));
            $fileName = md5(time().rand(1000,9999)).$Extension;
//            $fileName = 'exampleobject.jpg';
            $key = "blog/".date('Ym')."/".$fileName;
            if ($file) {
                $result = $cosClient->putObject(array(
                    'Bucket' => $bucket,
                    'Key' => $key,
                    'Body' => $file));
                $rst = $result;
                $rst['code'] = 200;
                $rst['msg'] = '上传腾讯云成功';
                $rst['db'] = '腾讯云';
                $rst['fileName'] = $fileName;
                return $rst;
            }
        } catch (\Exception $e) {
            $rst['code'] = 400;
            $rst['msg'] = $e->getMessage();
            return $rst;
        }
```
![](https://skapi-1253927675.cos.ap-guangzhou.myqcloud.com/blog/201911/f705c033ae3df3079c029d4f364340c1.png)

------------
###[layedit转editormd中遇到的一些坑]
layedit是layui内置的一个编辑器，因为我个人是比较喜欢layui的风格的，所以很多关于前端的我都是基于layui写的，包括这个管理后台，最先本来想用layui自带的编辑器插件
![layedit编辑器](https://skapi-1253927675.cos.ap-guangzhou.myqcloud.com/blog/201911/8a134c75d58e86e34560ddcbfbe8d038.png "layedit编辑器")
大概就长这个样子，比较简单，没有花里胡哨的功能，也还是可以用，然而我却犯了一个很XX的错误。大概就是layedit上传图片后需要接受返回值
```javascript
{
  "code": 0 //0表示成功，其它失败
  ,"msg": "" //提示信息 //一般上传失败后返回
  ,"data": {
    "src": "图片路径"
    ,"title": "图片名称" //可选
  }
}
```
我后台返回的code是200，所以一直都提示上传成功，但是图片并没有回写入文章，在当时想了好久也没结果，干脆试下其他编辑器，于是这里就发现了一款比较中意的编辑器editormd，这个是地址[https://pandao.github.io/editor.md](https://pandao.github.io/editor.md "https://pandao.github.io/editor.md")
markdown编辑器，和cdsn的markdown编辑器有点像，如果在cdsn写文章习惯了，这个上手应该很快。
####在这里我主要是讲我遇到的坑
![](https://skapi-1253927675.cos.ap-guangzhou.myqcloud.com/blog/201911/09f1ee88fbefc0866a60d58df748e083.png)
这是添加代码块（多语言），这里本来应该有个下拉框，是选择语言，然而，并没发现。还以为引入文件哪里错了，于是进到js文件各种console.log（），最后发现js是赋值成功了的，然后再到页面看下
![](https://skapi-1253927675.cos.ap-guangzhou.myqcloud.com/blog/201911/4a3493c07519d46678e41f284c6baf83.png)
原来是layui的form样式是默认隐藏了select标签的，他自己有渲染一个下拉框，既然找到问题就好办了，改之，设置他的style样式`display: inline;`。