PHP网站实现-导入word自动转换为md文档并自动上传图片到腾讯云cos服务器

嗨，大家好，当大家看到这篇文章的时候，已经代表我的个人博客完美实现了该功能，也就是word文档上传自动解析为markdown语法，并且将图片上传到腾讯云了，不信的话你打开审查元素来看看我的图片地址是不是cos.micuer.com的。

主机环境：

-   php7.2

-   nginx

-   pandox（自己安装）

-   html

-   jquery

实现思路：

1：上传word文档到自己的服务器

2：利用pandoc转换为word

3：php解析到转换完成的字符，并且得到图片

4：将图片上传到腾讯云

5：替换步骤3中图片地址

6：处理好的返回给前端 editor.md编辑器

7：删除word，img等本地文件

PHP代码
```
public function uploadword(){
        $file = request()->file("word");
        // 上传到本地服务器
        $savename = \think\facade\Filesystem::disk('upload')->putFile( 'word', $file);

$file_path = './data/'.$savename;

$md_path = $file_path.'.md';

//word/20220610/48fa8b0cab182b538faee928b99bb326.docx

// 全路径 /www/wwwroot/micuer.com/public/data/word/20220610/48fa8b0cab182b538faee928b99bb326.docx

// html路径 /www/wwwroot/micuer.com/public/data/word/20220610/48fa8b0cab182b538faee928b99bb326.docx.html

//组装命令
        $cmd = "pandoc {$file_path} -o {$md_path} --extract-media=."; //图片先保存到当前目录下，后传cos

$res = exec($cmd,$array, $ret);

$str = file_get_contents($md_path);

//正则匹配到字符串中所有的图片
        $partnner = '/\]$(.*?(?<=png|gif|jpg))$/';
        preg_match_all($partnner,$str,$match);

//传到cos云
        $cosClient = $this->cosClient;
        $bucket = env('COS.bucket'); //存储桶名称 格式：BucketName-APPID
        foreach ($match[1] as $index => $m) {
            $file = fopen($m, 'rb');
            if ($file) {
                $result = $cosClient->Upload(
                    $bucket = $bucket,
                    $key = $m,
                    $body = $file);
                $this->saveToDb('file', str_replace("./media/","https://micuu.com/media/",$m));
            }
        }

//替换掉字符串中所有图片为http开头的 - 这里需要修改 /www/cosfs/micuer/word_to_html/media/document_image_rId11.png
        // $str1 = str_replace("search","replace",$match[1]);
        $replace_arr = str_replace("./media/","https://micuu.com/media/",$match[1]);
        $result = str_replace($match[1],$replace_arr,$str);

//删除本地文件
        $this->deleteDir('./data/word/'.date("Ymd",time()));

return json(["code"=>200,"msg"=>"成功","data"=>$result]);
    }
```
HTML代码
```
<div class="icon">
            <a href="javascript:;" onclick="$('#file_input').click()">
                导入 <br>
                word
            </a>
            <input style="display: none" type="file" id="file_input" multiple/>

</div>
```

js代码

```
document.getElementById('file_input').addEventListener('change', function(e) {
            //1.可以通过this拿到这个file的DOM元素
            console.log(this)
            //1.  e 函数事件参数对象中也有这个file的DOM元素对象。使用e.target也可以直接拿到
            console.log(e.target)
            //对开发人员屏蔽，所以直接 必须调用这个文件的DOM对象的files属性，返回一个数组
            let files = e.target.files
            console.log(files)
            // console.log(files.item(0))
            console.log(files[0])
            //预览 ----- 此处只判断了 第一张图 - 后续逻辑需要大家自行优化
            if (files[0]) {
                // 创建流对象
                reader = new FileReader()
                reader.readAsDataURL(files[0])
            }
            reader.onload = function(e) {
                // 转换后的base64就在e.target.result里面,直接放到img标签的src属性即可
                document.querySelector('img').src = e.target.result
            }
            //预览结束 -----
            // 判断一手是否有文件
            if (!files.length) return
            // 上传文件 创建FormData
            let formData = new FormData()
            // upFile就是后台接收的key
            formData.append('word', files[0], files[0].name)
            // 将formdata发送到后台即可
            $.ajax({
                url: "{:url('Upload/uploadword')}",
                type: "POST",
                dataType: "json",
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    layer.load();
                },
                error: function() {
                    layer.closeAll();
                    layer.msg('失败，请重试');
                },
                success: function(data) {
                    testEditor.setValue(data.data)
                    layer.msg('上传成功');
                    layer.closeAll();
                }
            })
        })
```

以上代码只是展示了基础功能，其他部分细节功能没有展示，大家使用的话需要进行简单的调试。

最后：必须付上一张图咯，不然图片怎么自动上传到cos腾讯云

![descript](https://micuu.com/media/image1.png)

注:原创不易,转载请注明出处( https://micuu.com/new/2884.html )，本站所有资源来源于网络收集，如有侵权请联系QQ245557979进行清除。