智一面gtalent-星之码前端开发框架vue系列教程-element-ui upload上传技巧

本文章应用场景是：

前端使用的是vue.js和element-ui。

上传是包含在一个表单里面，使用element-ui的upload上传组件，想实现的是在我点击上传选择文件后不让它自动提交，而是在我点击确定后，经过一系列的验证再提交。而且element-ui的upload组件上传的路径跟表单保存的路径是不一样的。具体看代码。 

<!-- 新增弹窗-->

        <el-dialog title="上传文件" :visible.sync="dialogFormVisible" width="40%">

            <el-form :model="form" status-icon :rules="rules" ref="form">

                <el-row type="flex" justify="center">

                    <el-col :span="22">

                        <el-form-item label="上报机构:" :label-width="formLabelWidth" prop="organization">

                            <el-input v-model="form.organization" auto-complete="off"></el-input>

                        </el-form-item>

                    </el-col>

                </el-row>

                <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"

                            >

                                <el-button size="small" type="primary">点击上传</el-button>

                            </el-upload>

                        </el-form-item>

                    </el-col>

                </el-row>

            </el-form>

            <div slot="footer" class="dialog-footer">

                <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>

                <el-button size="small" type="primary" @click="insert('form')">确 定</el-button>

            </div>

        </el-dialog>

 :file-list="fileList",这个fileList是自己定义的一个文件列表，显示的文件就是这个里边的文件。不要跟下面函数里面的fileList搞混了，函数里面的是element-ui自己封装的一个变量。具体看它的官网。
:action="uploadUrl()"是动态设置的文件上传路径。

uploadUrl:function(){
    return "http://127.0.0.1:8081/uploadFile";
},

:data="myData"是设置上传携带的其他的数据。

myData(){
    return {
        "businessId":this.form.fileId,
        "businessType":"sys_file"
    }
}

:headers="myHeader"是设置的请求头

myHeader(){
    return {
        "authToken":window.sessionStorage.getItem('authToken')
    }
},

这里值得一提的是，在使用element-ui和vue.js的时候，设置:data和:headers要在vue.js的计算属性里面添加

computed: {
    myHeader(){
        return {
            "authToken":window.sessionStorage.getItem('authToken')
        }
    },
    myData(){
        return {
            "businessId":this.form.fileId,
            "businessType":"sys_file"
        }
    }
},

这样就能加上，如果有其他的方法也可以试一试。

判断文件大小：

addFile(file,fileList){
    this.fileList = fileList;
    //限制上传文件为5M
    var sizeIsSatisfy = file.size < 5*1024*1024 ? true:false;
    if(sizeIsSatisfy){
        return true;
    }else{
        this.fileSizeIsSatisfy = false;
        return false;
    }
}, 

这里用的是：:on_change事件,它会在文件添加的时候去条用addFile方法，就做验证，fileSizeIsSatisfy是我定义的一个变量，当我上传的文件中存在大于5M的文件时，fileSizeIsSatisfy = false，在点击提交时就会提示存在大于5M的文件，不能提交。暂时没找到添加一个文件的时候，就让它从文件列表中移除，这个fileList是它封装的一个文件列表，暂时没找到，只能先这样折中的办法。

下面就是我点击确认的时候执行的insert方法。

insert(formName) {
    this.$refs[formName].validate((valid) => {
        if (valid) {
            if(this.fileList.length <= 0){
                this.$message.error("请至少上传一个文件！");
                return;
            }
            if(!this.fileSizeIsSatisfy){
                this.$message.error("上传失败！存在文件大小超过5M！");
                return;
            }
            //手动上传文件，在点击确认的时候 校验通过才会去请求上传文件的url
            this.$refs.upload.submit();
            this.postRequest("/api/rcs/sysFile",this.form).then((res)=>{
                if(res.data.status == 200){
                    this.form = {};
                    this.fileList = [];
                    this.dialogFormVisible = false;
                    this.$message.success('新增成功！');
                    this.getUploadList(1);
                }else{
                    this.$message.error(res.data.msg);
                }
            })
                .catch((error)=>{
                    this.$message.error(error)
                })
        } else {
            this.$message.error('error submit!!');
            return false;
        }
    });
},

在执行到this.$refs.upload.submit();的时候才会去请求文件上传的地址进行文件上传。