element-ui upload上传技巧（二）

在之前的文章中说过怎么在我们手动上传文件的时候以更科学的方式来判断文件的大小。

这里记录下在我们添加文件的时候就判断文件的大小，并且把这个文件从element-ui 的upload封装好的fileList（上传的文件列表）中移除。

想实现这个功能就要用到 on-change属性，官网上是这么说的：文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用。所以我们需要的就是这个属性。

<el-row type="flex" justify="center">
                    <el-col :span="22">
                        <el-form-item label="上传文件:" :label-width="formLabelWidth">
                            <el-upload
                                    class="upload-demo"
                                    ref="upload"
                                    :with-credentials="true"
                                    :limit="5"
                                    :file-list="fileList"
                                    :data="myData"
                                    :action="uploadUrl()"
                                    :headers="myHeader"
                                    :on-change="addFile"
                                    :on-remove="removeFile"
                                    :auto-upload="false"
                                    :on-error="errorCallback"
                                    :on-success="successCallback"
                            >
                                <el-button size="small" type="primary">选择文件</el-button>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>

在addFile（）： 

addFile(file,fileList){
                debugger;
                //限制上传文件为5M
                if(file.size > 5*1024*1024){
                    //移除element-ui封装的上传文件的列表 移除不满足条件的文件
                    this.$refs.upload.$data.uploadFiles.splice(this.$refs.upload.$data.uploadFiles.length-1,1);
                    this.$message.error("文件大小不能超过5M");
                }
                this.fileList = fileList;
            }

看过element-ui官网的就知道它封装好了这个方法的参数，file就是当前操作的文件，fileList是要上传的文件列表。

this.$refs.upload指的是element-ui upload上传组件的所有东西，包括我们要上传的文件列表，其它东西可以自己去研究下。

this.$refs.upload.$data.uploadFiles 就是它封装的底层的fileList（文件列表），我们只要进行大小判断，然后再移除当前不满足条件的就ok。

在这里再告诉大家一个小细节，使用on-change，官网说成功或者失败后会回调，那你就要加上

:on-error="errorCallback"
:on-success="successCallback"

加上失败成功后回调的函数之后，才会在上传之后（不管成功与否）进入on-change里面的addFile函数。