浅探element-ui2组件源码之upload

2018-06-24 01:30:41来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

  最近不小心更新了element-ui的版本,已经到了2.1.0,以前修改的源码都失效了。

  于是重新尝试下面的指令重新修改:

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

  这时候会发现,不仅npm run dist的eslint日常报错,连npm install都报错了,不过是普通的operation not permitted,用管理员权限运行下cmd就OK了。

  问题在于这个dist出来的lib文件夹,我去掉了eslint的扫描指令后,可以成功打包,生成的文件夹覆盖后,有一个组件报错了:

  这真的是搞毛,我只是修改了upload的组件,分页组件居然报错了。

  我以为两者是关联的,但是我什么都不改,直接dist后,仍然会报这个错。

  这时只有两个选择,去修改pagination组件源码,尝试修复错误。或者不改源码,尝试从给的方法解决问题。

 

  因为如果改源码要锁定版本,还是非常坏事的,所以这次我决定从暴露出的API来解决我的问题。

  问题还是那个老的,upload组件点击删除图片时必须弹一个确认框,点击确认后才能删除,如图:

  这里我直接用了element-ui的另一个指令this.$message,之前是在源码里删除图片前直接加了一个判断:

// 根据变量控制流程
handleRemove(file, raw) {
  // 添加的确认环节
  if (this.jimmyRemoveTip) {
    this.$confirm('此操作将永久删除图片, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      // ...删除图片
    }).catch(() => {
      this.$message({
        type: 'info',
        message: '已取消删除'
      });          
    });
  }else {
    // 正常流程
  }  
}

  但是现在这条路行不通了,于是我尝试看看新版本的element-ui有没有加辅助代码。

  直接进入了element-ui的packages/upload/src/index.vue中,翻到handleRemove方法,惊喜的发现多了一个判断:

handleRemove(file, raw) {
    if (raw) {
        file = this.getFile(raw);
    }
    let doRemove = () => {
        this.abort(file);
        let fileList = this.uploadFiles;
        fileList.splice(fileList.indexOf(file), 1);
        this.onRemove(file, fileList);
    };

    if (!this.beforeRemove) {
        doRemove();
    } else if (typeof this.beforeRemove === 'function') {
        const before = this.beforeRemove(file, this.uploadFiles);
        if (before && before.then) {
            before.then(() => {
                doRemove();
            }, noop);
        } else if (before !== false) {
            doRemove();
        }
    }
}

  这里有一个新的判断beforeRemove,跑去官网看,是这样解释的:

  这就很爽了,根据源码的情况和官网解释,只要返回一个false或者reject就能让删除操作停止。

  返回false是很简单,但是这里我只能用$message指令,这玩意返回的是一个Promise,于是我要想办法在点击取消的时候reject掉,一开始我是这样写的:

return this.$confirm('是否确定删除该图片 ?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
}).then(null, e => {
    throw new Error('reject');
});

  相当暴力,这个当然解决了问题。但是抛出个错误总觉得很不雅,最后改成了这样:

return this.$confirm('是否确定删除该图片 ?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
}).then(null).catch(e=>{
    e();
});

  

  解决了问题一,还剩另外一个。当上传的图片到上限时,需要把上传按钮隐藏。

  目前upload组件有一个关于上限的参数,是limit,但是这个参数很局限,在上传图片达到上限时,会中止上传,源码如下:

uploadFiles(files) {
    // 达到上限调用on-exceed钩子函数并返回
    if (this.limit && this.fileList.length + files.length > this.limit) {
        this.onExceed && this.onExceed(files, this.fileList);
        return;
    }

    let postFiles = Array.prototype.slice.call(files);
    if (!this.multiple) { postFiles = postFiles.slice(0, 1); }

    if (postFiles.length === 0) { return; }

    postFiles.forEach(rawFile => {
        this.onStart(rawFile);
        if (this.autoUpload) this.upload(rawFile);
    });
}

  虽然可以在on-exceed钩子函数中提示用户图片上传达到上限,但是产品要上传按钮消失,这就很头疼了……

  目前还未找到完美的解决办法,先在钩子函数中做上限提示……

 

  在不久之前,后台也提了一个需求,说多张上传不能太多,最多一次10张,不然图片服务器处理不过来。

  如果能改源码,这个需求分分钟就搞定。但是现在行不通,只能从现存的API来想办法。

  整个组件结构很简单:

// 根据类型摆放图片展示list的位置
// uploadComponent就是那个上传按钮
// $slots.default是白框框中间自定义的图标
// $slots.tip是下面的文字
<div>
    { this.listType === 'picture-card' ? uploadList : ''}
    {
        this.$slots.trigger
        ? [uploadComponent, this.$slots.default]
        : uploadComponent
    }
    {this.$slots.tip}
    { this.listType !== 'picture-card' ? uploadList : ''}
</div>

  示例代码如下图所示:

<div class="upload-content">
    <el-upload
    /*...*/>
    <!-- slot默认为default -->
    <p>default</p>
    <p slot='tip'>tips</p>
    </el-upload>
</div>

  效果图:

  而uploadList组件就是已上传的图片展示组件,这个组件没有暴露API,纯展示,所以我的第二个问题暂时不好处理。

  

  接下来看上传流程,整个upload组件的入口代码如下:

<input class="el-upload__input" type="file" ref="input" name={name} on-change={handleChange} multiple={multiple} accept={accept}></input>

  核心上传按钮,属性直接看就懂了,点击上传按钮后,监听原生on-change事件,触发handleChange:

handleChange(ev) {
    // 获取事件对应的files
    const files = ev.target.files;

    if (!files) return;
    this.uploadFiles(files);
}

  我这个问题在一开始就可以得到解决在这个地方加一个判断就OK了,如下:

handleChange(ev) {
    // 获取事件对应的files
    const files = ev.target.files;

    if (!files) return;
    // 假设有一个自定义参数concurrenceUploadNumber限制同时上传文件数
    if (files.length > this.concurrenceUploadNumber) {
        this.onConcurrenceUpload && this.onConcurrenceUpload(files, this.fileLise);
        return;
    }
    this.uploadFiles(files);
}

  这不就解决了么……然而并没有这个东西。

  方法获取对应事件的文件或文件列表,调用uploadFiles方法:

uploadFiles(files) {
    // 文件超过限制触发钩子函数并返回
    if (this.limit && this.fileList.length + files.length > this.limit) {
        this.onExceed && this.onExceed(files, this.fileList);
        return;
    }
    // 转换为纯数组
    let postFiles = Array.prototype.slice.call(files);
    // 单文件上传模式只取第一个
    if (!this.multiple) { postFiles = postFiles.slice(0, 1); }

    if (postFiles.length === 0) { return; }
    // 调用forEach依次上传
    postFiles.forEach(rawFile => {
        this.onStart(rawFile);
        // 根据参数进行自动上传
        if (this.autoUpload) this.upload(rawFile);
    });
}

  这里后台跟我吐槽为什么要一个一个上传,弄成一个请求多好,同时上传100张就要发100次请求,所以服务器处理不过来。

  因为上传这部分之前了解较少,所以也不明白这里为什么这样处理。

  先不看onStart方法,过一下自动上传流程:

upload(rawFile, file) {
    // 清空上传按钮内容
    this.$refs.input.value = null;
    // 判断是否存在before-upload钩子函数
    if (!this.beforeUpload) {
        return this.post(rawFile);
    }
    // 钩子函数处理
    const before = this.beforeUpload(rawFile);
    if (before && before.then) {
        before.then(processedFile => {
            const fileType = Object.prototype.toString.call(processedFile);
            if (fileType === '[object File]' || fileType === '[object Blob]') {
                this.post(processedFile);
            } else {
                this.post(rawFile);
            }
        }, () => {
            this.onRemove(null, rawFile);
        });
    } else if (before !== false) {
        this.post(rawFile);
    } else {
        this.onRemove(null, rawFile);
    }
}

  然后调用了post方法做文件上传准备:

post(rawFile) {
    const { uid } = rawFile;
    // 上传文件的参数与回调函数
    const options = {
        headers: this.headers,
        withCredentials: this.withCredentials,
        file: rawFile,
        data: this.data,
        filename: this.name,
        action: this.action,
        onProgress: e => {
            this.onProgress(e, rawFile);
        },
        onSuccess: res => {
            this.onSuccess(res, rawFile);
            delete this.reqs[uid];
        },
        onError: err => {
            this.onError(err, rawFile);
            delete this.reqs[uid];
        }
    };
    // 上传
    const req = this.httpRequest(options);
    this.reqs[uid] = req;
    // 返回结果
    if (req && req.then) {
        req.then(options.onSuccess, options.onError);
    }
}

  这里的上传方法httpRequest可以自定义,默认是内置的ajax方法。

  ajax就没什么营养了,所以正常人使用的上传流程大概就是这样。

  但是我不行啊,需要不修改源码的情况下完成特殊需求,还是有点……

  过了一遍流程,发现可操作的地方只有一个地方,那就是auto-upload那里,将自动上传置false,然后进行二次处理,所以之前的流程会断:

postFiles.forEach(rawFile => {
    // 进入onStart
    this.onStart(rawFile);
    // 不进行上传
    if (this.autoUpload) this.upload(rawFile);
})

  这里看一下onStart的内容:

// 'on-start': this.handleStart
handleStart(rawFile) {
    // 随机数
    rawFile.uid = Date.now() + this.tempIndex++;
    // 包装文件对象
    let file = {
        status: 'ready',
        name: rawFile.name,
        size: rawFile.size,
        percentage: 0,
        uid: rawFile.uid,
        raw: rawFile
    };
    // 转换URL以便展示
    try {
        file.url = URL.createObjectURL(rawFile);
    } catch (err) {
        console.error(err);
        return;
    }
    // 将文件弹入图片展示数组
    this.uploadFiles.push(file);
    // 触发onChange事件
    this.onChange(file, this.uploadFiles);
}

  这个函数主要是封装了file对象,展示上传的图片但不做上传操作。

  这样的话就有操作空间了,于是我监听了onChange事件并看看返回的参数内容:

<el-upload
/*...*/
:on-change='uploadFile'>
</el-upload>

  打印内容如下:

  其中第一个参数是封装的file对象,url是转换的本地路径以便展示。

  第二个参数是uploadList的组件参数,会将之前已有的图片也加进来。

  如果同时上传10张照片,会触发10次onChange事件,由于不会做上传操作,所以可以在前端处理掉。

  当时我想着不如在这里把所有上传的请求整合成一个,但是由于每个文件上传都会触发该事件,我又无法获取上传文件数量,所以想着还是限制吧。

  假想代码如下:

uploadFile(f, fl) {
    let localFileList = this.list,
        len = localFileList.length;
    // 获取上传的图片数量
    let uploadFileList = fl.slice(len);
    if (uploadFileList.length > 10) {
        // 不进行上传
    } else {
        // 正常上传
    }
}

  然而这是不现实的,问题还是每个上传都会触发该事件,所以会重复上传之前的图片。

  不搞了……不想自己封装组件,木有UI天赋。

  没办法,已经提了Feature Request,不知道有没有用。

  

  啊……年后深圳求职,一年萌新求带走。

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:insertAdjacentHTML与innerHTML

下一篇:【JavaScript】事件