有关QJ_Filecenter在vue中的使用和组件封装

QJ_FileCenter在vue中的使用和组件封装

安装

简介
本软件中的文件管理这一块（包括文件上传，预览，下载）是单独部署的一个模块，需要在服务器上单独安装一个软件来提供文件的上传，下载，及office预览服务，相关详情
见QJ_FileCenter对应的说明文档

第一步：在官网下载QJ_FileCenter安装包

地址：http://www.qijiekeji.com/Web/GRWZ/index.html
下载完成后直接安装，安装完成后在Windowserver服务里查看

看到这个说明安装成功了
若下次使用发现服务被关，可以在“QJ_FileCenter.exe.config”中的

这里原来是为0的，设置为1后，就可以正常启动服务了。

第二部：访问FileCenter的管理端

默认为 http:本机地址:9100
看到下面这个代表没问题了,输入账号admin 密码123456 访问管理端
如果密码错误，可以通过找到bin目录下的.db文件，用navicat打开，sysuser表里面可以看到默认有四个用户，网上找个在线解析md5的网站，解析一下密码就行了
初始密码：851215

第三步：修改端口号或者文件存放的路径（可选）

如果想修改端口号或者路径（万一端口被占用或者其它什么的）,到软件安装目录下找到 AppConfig文件

修改默认端口号或者存放路径，重启QJ_FileCenter服务即可

调用WebUpload组件上传
调用WebUpload组件上传
1：引用 文件服务器地址+/Web/qj_upload.js

我在vue中使用时，使用时则为创建一个IPConfigjs文件：

在index.html添加

<script>
      var iphead = 'script';
      var ipurl = "./IPConfig.js?v="
      document.write("<" + iphead + " type=\"text/javascript\" src=\"" + ipurl + Date.now() + "\"></" + iphead + ">");
</script>
<script>
  var _header = 'script';
  var _w = '/Web/qj_upload.js?v=3'
  var loadtemp = window.IPConfig.UpLoadURL
  document.write("<" + _header + " type=\"text/javascript\" src=\"" + loadtemp + _w + "\"></" + _header + ">");
</script>

关于IPConfig.js的创建和使用
1、首先创建该名称的js文件
2、在里面添加

3、然后再url.ts文件中

使用JS方法调用上传WebUpload组件

 <script>
        $(document).ready(function () {
            var obj = {
                uploadButtton: 'upload',//触发上传事件得元素ID
                fileapiurl: "http://47.92.121.230:9100/",//文件中心URL
                usercode: "qycode",//文件中心中空间里对应的QYCODE
                secret: "qycode",//文件中心中空间里里对应的企业secret
                width: "90%",//弹出窗口宽度
                left: "5%",//弹出窗口左侧边距
                upinfo: "测试消息",//上传附带信息
                webupconfig: {
                    fileNumLimit: 5,
                },//WebUpload配置项(可以配置文件上传类型，大小等属性)
                filecomplete: function (fileData) {
                    //console.log('上传完毕！ 上传成功的文件：');
                    //console.log(JSON.stringify(fileData));
                },//文件上传成功返回数据
                closeupwin: function (fileData) {
                    $("#upmsg").append(JSON.stringify(fileData) + "<br/>")
                }//关闭按钮返回上传数据
            };
            var upload = new QJUpload(obj);
        });
    </script>

vue封装上传组件，并实现上传、下载、预览功能

代码中都有注释，使用的是vue+element-ui
阿里云地址：git@code.aliyun.com:mjluobi/QjFileCenter.git

顺手点个赞吧！！！