el-upload源码修改跳坑

之前给element-ui提了一个问题，结果没有鸟我，没办法，只能修改源码来满足需求了

(备注：element-ui2依然没有修改，为了迎合产品还是要改源码)

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

---

​ 现在的问题是这样的：

​ 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;
  }
}
}

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

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

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

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

---

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

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

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

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

​ 当时有两个想法：

1、修改disabled的默认行为，让上传按钮消失，删除按钮不作用

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

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

​ 一开始想法十分简单，找到了目录node_modules\element-ui\packages\upload\src下的upload.vue文件，为了看效果，直接添加了一行代码：

// line-163
const data = {
  class: {
    'el-upload': true,
    'abc': true, // 这里是我自己加的
  },
  on: {
    click: handleClick
  }
};

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

​ 这就十分尴尬了，于是换了个地方，找到了node_modules\element-ui\lib下的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函数，我想着这次应该稳了，结果打包后一看，还是不行。

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

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

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

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

​ 事不宜迟，试试！

​ 找到了element\packages\upload\src下的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}就行了。

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