澳门新葡萄京官网注册 5

澳门新葡萄京官网注册WordPress后台中实现图片上传功能的实例讲解

图片上传

之前给element-ui提了一个问题,结果没有鸟我,没办法,只能修改源码来满足需求了
(备注:element-ui2依然没有修改,为了迎合产品还是要改源码)

文件准备:新建php文件,我用默认主题Twenty
Ten来测试,首先在这个主题的文件夹下新建一个文件-myfunctions.php  
然后打开functions.php文件在最底部添加下面的代码载入我们新建的这个文件:

本文讨论的组件属性仅限于list-type='picture-card'

include_once('myfunctions.php');

类的代码如下:

​ 现在的问题是这样的:

<?php   
//类ClassicOptions  
class ClassicOptions {   
  /* -- getOptions函数获取选项组 -- */   
  function getOptions() {  
    // 在数据库中获取选项组   
    $options = get_option('classic_options');   
    // 如果数据库中不存在该选项组, 设定这些选项的默认值, 并将它们插入数据库   
    if (!is_array($options)) {   
      //初始默认数据  
      $options['ashu_copy_right'] = '阿树工作室';  
        
      //这里可添加更多设置选项  
        
      update_option('classic_options', $options);   
    }  
    // 返回选项组  
    return $options;  
  }  
  /* -- init函数 初始化 -- */   
  function init() {   
    // 如果是 POST 提交数据, 对数据进行限制, 并更新到数据库   
    if(isset($_POST['classic_save'])) {   
      // 获取选项组, 因为有可能只修改部分选项, 所以先整个拿下来再进行更改   
      $options = ClassicOptions::getOptions();   
      // 数据处理  
      $options['ashu_copy_right'] = stripslashes($_POST['ashu_copy_right']);   
        
      //在这追加其他选项的限制处理   
        
      // 更新数据   
      update_option('classic_options', $options);   
      
    } else {  
      // 否则, 重新获取选项组, 也就是对数据进行初始化  
      ClassicOptions::getOptions();   
    }  
      
    //添加设置页面  
    add_theme_page("主题设置", "主题设置", 'edit_themes', basename(__FILE__), array('ClassicOptions', 'display'));   
  }   
  /* -- 标签页 -- */   
  function display() {   
    $options = ClassicOptions::getOptions(); ?>   
    <form method="post" enctype="multipart/form-data" name="classic_form" id="classic_form">   
    <div class="wrap">   
    <h2><?php _e('阿树工作室主题设置', 'classic'); ?></h2>   
    <!-- 设置内容 -->   
    <table class="form-table">   
      <tbody>   
        <tr valign="top">   
          <td>  
            <label>   
              <input type="text" name="ashu_copy_right" value="<?php echo($options['ashu_copy_right']); ?>" size="20"/><?php _e('阿树工作室版权文字');?>   
            </label>   
          </td>   
        </tr>   
      </tbody>   
    </table>   
    <!-- TODO: 在这里追加其他选项内容 -->   
    <p class="submit">   
      <input type="submit" name="classic_save" value="<?php _e('保存设置'); ?>" />   
    </p>   
  </div>   
</form>   
<?php   
  }   
}  
  
/*初始化,执行ClassicOptions类的init函数*/   
add_action('admin_menu', array('ClassicOptions', 'init'));    
?>


element-ui中有一个upload组件,可以上传图片或文件。该组件有很丰富的钩子函数与配置,但是没有一个限制上传图片数量(即使是按钮禁用)的方法,于是我就自己封装了一下:

之后查看我们的后台设置页面,看一下我添加之后的效果图:

<el-upload :disabled='is_max' @s='...' @r='....' ...其余配置></el-upload>

export default = {
  props:['num'], // 限制上传数量
  methods:{
    on-success:function(r,f,fl){
    this.is_max = true;
    if(this.num && this.num === fl.length){
    this.is_max = false;
  }
  this.$emit('s',f,fl);
},
  on-remove:function(f,fl){
    this.is_max = false;
    this.$emit('r',f);
  },
  on-progress:function(){
      this.is_max = true;
  }
}
}

澳门新葡萄京官网注册 1

​ 封装添加了一个num参数,限制上传数量,并在上传过程中禁用上传按钮。

此时文本域和上传按钮已经有了,但是点击还是没有任何效果。为了点击后弹出那个上传框架,我们还需要添加js代码。


最初的目的是达到上传数量限制,就禁止上传,但是可以删除图片,删除后解除限制。

为了便于管理,我们新建一个js文件,在twentyten主题文件夹下新建一个文件夹js然后,在这个文件加下新建一个upload.js文件。添加js代码:


这个需求在1.3.7版本可以实现,但是在后面的某一次(可见我上一篇文章的结尾)commit中被修改了,删除与上传同时受disabled影响,如果设置disabled=’true’,那么这个组件变成了一个纯展示作用,无法删除,无法添加。

jQuery(document).ready(function() {  
  //upbottom为上传按钮的id  
  jQuery('#upbottom').click(function() {  
    //ashu_logo为文本域  
     targetfield = jQuery(this).prev('#ashu_logo');  
     tb_show('', 'media-upload.php?type=image&TB_iframe=true');  
     return false;  
  });  
  
  window.send_to_editor = function(html) {  
     imgurl = jQuery('img',html).attr('src');  
     jQuery(targetfield).val(imgurl);  
     tb_remove();  
  }  
  
});

​ 后来决定暂时用1.3.7版本打包,先出功能。

下面就是加载js和css了。
在上面的类中display()函数中添加以下代码:


//加载upload.js文件  
    wp_enqueue_script('my-upload', get_bloginfo( 'stylesheet_directory' ) . '/js/upload.js');  
    //加载上传图片的js(wp自带)  
    wp_enqueue_script('thickbox');  
    //加载css(wp自带)  
    wp_enqueue_style('thickbox');


原以为事情可以缓一缓,没想到产品对那个上传按钮十分不满,认为如果达到了上限,这个按钮会产生困惑,应该消失。禁用不行,里面弄个叉也不行,必须要消失!

之后如果你查看后台设置页面的源码,在源码的大概最后面位置能看到你加载的这个js文件。

​ 好吧,只能来一发硬的,改源码。

好了,可以去试用了:

​ 上传按钮控制的标签如下所示,type为picture,text,picture-card之一。

澳门新葡萄京官网注册 2

<div class='el-upload el-upload--(type)'></div>

多个图片上传表单 首先我们修改表单,添加多个上传按钮,还加上显示图片用的div容器。
上面教程中的js代码中是通过文本域的id值来获取元素的,如果有多个文件上传表单,但是在一个html文档中id不能相同,那样的话,就得针对每个表单都写一个js,这样很繁琐,所以今天我们修改一下表单,并且将js改成通过class获取对象。

​ 当时有两个想法:

将类中的display()函数修改为(我新加了一个ashu_ico项,并且将上传按钮的id属性去掉改成class=”ashu_bottom”):

澳门新葡萄京官网注册,1、修改disabled的默认行为,让上传按钮消失,删除按钮不作用

function display() {  
    //加载upload.js文件  
    wp_enqueue_script('my-upload', get_bloginfo( 'stylesheet_directory' ) . '/js/upload.js');  
    //加载上传图片的js(wp自带)  
    wp_enqueue_script('thickbox');  
    //加载css(wp自带)  
    wp_enqueue_style('thickbox');  
    $options = ClassicOptions::getOptions(); ?>     
    <form method="post" enctype="multipart/form-data" name="classic_form" id="classic_form">     
    <div class="wrap">     
    <h2><?php _e('阿树工作室主题设置'); ?></h2>  
    <p>  
    <label>  
      <input type="text" size="80" name="ashu_logo" id="ashu_logo" value="<?php echo($options['ashu_logo']); ?>"/>  
      <input type="button" value="上传" class="ashu_bottom"/>  
    </label>  
    </p>  
    <p>  
    <label>  
      <input type="text" size="80" name="ashu_ico" id="ashu_ico" value="<?php echo($options['ashu_ico']); ?>"/>  
      <input type="button" value="上传" class="ashu_bottom"/>  
    </label>  
    </p>      
    <p class="submit">  
      <input type="submit" name="classic_save" value="<?php _e('保存设置'); ?>" />     
    </p>     
  </div>     
</form>     
<?php     
  }

2、引入新的变量,单独控制上传按钮

这里新加了一个设置项,前面默认数据设置、数据更新都需要相应的增加项目,很简单,这里不赘述。

​ 由于不知道源码的内部行为,所以先想着。

且看新的js代码,用编辑器打开我们的upload.js,修改代码为:


一开始想法十分简单,找到了目录node_moduleselement-uipackagesuploadsrc下的upload.vue文件,为了看效果,直接添加了一行代码:

jQuery(document).ready(function() {  
  //查找class为ashu_bottom的对象  
  jQuery('input.ashu_bottom').click(function() {  
    //获取它前面的一个兄弟元素  
     targetfield = jQuery(this).prev('input');  
     tb_show('', 'media-upload.php?type=image&TB_iframe=true');  
     return false;  
  });  
  
  window.send_to_editor = function(html) {  
     imgurl = jQuery('img',html).attr('src');  
     jQuery(targetfield).val(imgurl);  
     tb_remove();  
  }  
  
});
// line-163
const data = {
  class: {
    'el-upload': true,
    'abc': true, // 这里是我自己加的
  },
  on: {
    click: handleClick
  }
};

到此多个图片上传已经实现,其实也很简单。。


保存-打包-打开网页-F12,发现并没有abc这个类被加上去,查看打包后的JS文件,依然只有一个el-upload类。

澳门新葡萄京官网注册 3


这就十分尴尬了,于是换了个地方,找到了node_moduleselement-uilib下的upload.js文件,添加了两行代码:

// line-934
var data = {
  class: {
    'el-upload': true,
    'abc': true //同上
  },
  on: {
    click: handleClick
  }
};
// line-1312
var oClass = { 'el-upload': true, 'abc':true};
oClass['el-upload--' + listType] = true;


这里直接修改了打包后的render函数,我想着这次应该稳了,结果打包后一看,还是不行。


这就十分尴尬了,只能上网搜搜。一开始找到教程,教你修改哪个文件,然后实现功能,然而跟我之前的步骤一样,不可信。继续搜索,终于找到了一位小哥:

​ 懒得看网页的可以找一个安静的文件夹,依次运行以下指令:

git clone https://github.com/ElemeFE/element.git
cd element
npm install


此时,element的元身会被下载下来。接下来修改package文件夹中的源码,运行npm
run
dist指令,该指令会在当前目录生成一个lib文件夹,用这个文件夹替换node_modules中的lib文件夹,然后打包就可以了!

​ 事不宜迟,试试!

​ 找到了elementpackagesuploadsrc下的upload.vue,再次进行修改:

class: {
  'el-upload': true,
    'abc':true,
},

​ 又是熟悉的操作,然而报了2个error,一脸懵逼的看错误信息:

1、Missing space before value for key ‘abc’

2、Unexpected trailing comma

​ 凭着我过硬的英文功底修正了错误:

1、冒号后面要加空格

2、最后一个属性的逗号要省略

​ 修改后再次运行,眼前闪过一片花花绿绿,成了。

​ 覆盖了lib文件夹后再次尝试,可以惊喜的看到:

<div class='el-upload abc el-upload--picture-card'></div>

​ 感觉人生都阳光起来了,接下来是实现目标的时候了。



简略的看了下upload组件内部,有包含5个组件index、iframe-upload、upload-dragger、upload-list、upload。

​ 其中iframe-table是造一个表单,然后表单提交图片信息,略过。

​ upload-dragger是拖拽功能,略过。

​ upload-list实现已图片上传预览,略过。

​ 需要关注的只有整合所有组件的index与上传按钮相关的upload组件了。

​ index.vue的整个大概是这样:

<div>
  <upload-list></upload-list> <!-- 用于展示图片 仅当picture-card类型时在前面 -->
  <uploadComponent> <!-- 上传 内部的DOM会被当成上传按钮 通过FormDataAPI决定调用表单或者ajax -->
    <upload></upload> <!-- drag属性决定是否支持拖拽 -->
  </uploadComponent>
</div>


仔细看了一遍内部实现,再回头看一眼之前的2个想法,决定用第二个,修改默认有点麻烦。

​ 方式比较简单粗暴,在所有定义diabled的地方加上了一条新语句,比如:

// line-94
{
  disabled: Boolean
  Jimmy_input_btn_disabled: Boolean
}

​ 这样就自定义了一个新的数据,第二步,通过这个来阻止上传按钮生成。

​ 找来找去,只有一个地方可以控制:

// line-254
// 这里是上传按钮的渲染点
const uploadComponent = 
      this.Jimmy_input_btn_disabled ? '' : // 我加的
      (typeof FormData !== 'undefined' || this.$isServer)
? <upload {...uploadData}>{trigger}</upload>
: <iframeUpload {...uploadData}>{trigger}</iframeUpload>;

​ 加上后,打包测试:

<el-upload :Jimmy_input_btn_disabled='is_max' ...其余配置></el-upload>

​ 在图片达到上限后,上传按钮惊喜的消失了,舒服!

​ 然而,在下一秒,我删除图片的时候,就报了一个错,abort无法执行。

​ 顺着报错信息,找到了这里:

// 删除时候会调用的函数
handleRemove(file, raw) {
  if (raw) {
    file = this.getFile(raw);
  }
  this.abort(file);
  // ...
},
  //...
abort(file) {
  this.$refs['upload-inner'].abort(file);
},

​ 这个upload-inner呢,在index.vue也有定义:

const uploadData = {
  props: {
    // ...一堆参数
  },
  ref: 'upload-inner'
};


再看看上面uploadComponent的定义,我瞬间明白了,这个ref被作为参数传给了上传按钮,删除图片需要执行绑定在该按钮上面的abort函数。问题是,这个按钮被我弄没了,而且由于vue的’析构’,DOM上的事件也没了。

​ 结果就是,不可行,粗暴是不对的,两个方案同时否决。


​ 想了好久,既然不能让DOM消失,那么弄成display:none不就OK了么。

​ 两个方案:

1、根据某个条件动态渲染一个自定义的class,该class定义为diaplay:none

2、根据某个条件动态渲染行内样式display:none


由于render函数不太记得用法,所以第二个看起来实现有点难度,决定用第一个。当然,这个条件不能是默认的diabled,所以,我的Jimmy_input_btn_disabled又可以出场了。

​ 修改的时候遇到了瓶颈,里面的代码居然是JSX,我修改了upload.vue:

class: {
  'el-upload': true,
  'abc' : !!this.Jimmy_input_btn_disabled
},


很明显,虽然数据传进来了,但是并没有做到动态渲染,这里只是初始化,所以abc没有出现过,并且在变动的时候,根元素出现了这样的情况:

<div Jimmy_input_btn_disabled = 'true'></div>

​ 当时真是笑尿我了。


一度陷入了僵局,JSX不知道怎么写。如果是vue中的render函数,我还可以写个demo然后模仿。

​ 最后我甚至跑去看react的教程,但是人家变动数据用的是setState……


​ 在不断的尝试中的,我是找到了办法,简单的吐血。

​ 其实早就发现了,只是陷入了一个误区。


首先这个Jimmy_input_btn_disabled需要更改为String类型,作为一个动态类传入:

disabled: Boolean,
Jimmy_inputbtn_disabled: String

​ 第二步,在JSX中直接写class:

<div {...data} class={Jimmy_input_btn_disabled}>
  ...
</div>

​ 源码修改完成,打包。

​ html中如下:

<div :Jimmy_input_btn_disabled = 'xxx'></div>

​ JS文件如下:

new Vue({
  data:{
    xxx:''
  },
  methods:{
    s:function(){
      // 达到上限
      this.xxx = 'xxx';
    },
    r:function(){
      // 解除
      this.xxx = '';
    }
  }
});

​ CSS很简单,直接设置xxx{display:none}就行了。

澳门新葡萄京官网注册 4
澳门新葡萄京官网注册 5

​ 最后测试结果十分成功!

发表评论

电子邮件地址不会被公开。 必填项已用*标注