rpcms插件开发时插件配置文件如何实现图片上传

在开发rpcms插件的时候，使用到了配置文件，想让用户在后台可以直接配置修改图片，不需要再去服务器中操作了。

翻遍了官网的文档和教程也没见说这一块的。。估计官方正在慢慢更新教程吧。。

某的办法，只能靠自己了，也趁这个机会研究研究rpcms，功夫不负有心人哈，终于让我找到了。

其实吧，人家官方有说，在“帮助文档”中的“辅助函数”一栏中，有一个“uploadFiles”方法，这个就是官方封装好的上传文件函数。

原来是我误会官方大哥了，怪我没仔细仔细再仔细的看文档（说实话，就不能把文档整理清楚点吗...），下面看教程哈。

先看下uploadFiles这个方法的参数

uploadFiles(file, logId, pageId)
file：需要上传的图片或文件
logId：文章的ID，可以不填
pageId：单页的ID，可以不填

首先，在 Setting.class.php 配置文件对应的模板中加入表单，这里以ajax上传图片为例。

比如：
<div class="ws_upload">
    <input type="file" accept="image/*" class="wx_file">
    <button type="button" class="ws_upload_btn">上传微信二维码图片</button>
</div>

对应的JS代码：

$(".ws_upload_btn").click(function(){
    var _this=$(this),
        fileObj = ".wx_file",
        formData = new FormData(),
        file=$(fileObj)[0].files[0],
        isUpload=_this.data('isUpload') || false;
    if(isUpload) return !1;
    if(!file){
        $.Msg('请先选择图片文件');return !1;
    }
    formData.append("files", file);
    _this.attr('disabled',true).data('isUpload',true);
    $.ajax({
        'url':"{:url('plugin/run')}?to=插件名称/Setting/uploadImg",
        'type':'post',
        'data':formData,
        'contentType': false,
        'processData': false,
        'dataType':'json',
        'mimeType': 'multipart/form-data',
        'beforeSend':function(){
            $.loading('正在上传...');
        },
        'success':function(res){
            if(res.code == 200){
                $.closeModal();
                var imgUrl=res.data;
                /*
                *这里是你的逻辑操作，返回的res中的data元素是上传图片的地址
                */                
            }else{
                $.Msg(res.msg);
            }
        },
        'complete':function(){
            delete formData;
            $(fileObj).val(''),_this.attr('disabled',false).data('isUpload',false);
        },
        'error':function(){
            $.Msg('请求服务器失败');
        }
    })
    
})

和大家讲解一下上面的js，使用了FormData创建表单，ajax提交的url只需要改下?to=后面的内容就可以了

小知识：rpcms在后台运行插件是host/plugin/run.html?to=运行插件的方法

方法的写法：插件名称(即插件文件夹名称)/插件的mod/方法

如上面的ajax提交地址，我是把上传方法写在了插件文件夹中的Setting.class.php文件里面的uploadImg方法了。

最后，Setting.class.php的uploadImg方法

public function uploadImg(){
    $file=isset($_FILES['files']) ? $_FILES['files'] : '';
    if(empty($file)){
        return json(array('code'=>-1,'msg'=>'上传图片不能为空'));
    }
    return json(uploadFiles($file));
}

到此为止，插件配置中就可以上传图片了，而且还是异步上传哟~

小伙伴们可以举一反三使用在其他地方哈。随便提醒下各位，一定要细心！细心！再细心！很多时候不是我们找不到，而是没注意到！