element ui 上传控件使用总结

上传控件使用总结。

<el-form-item class="el-for-item" label="上传升级包" :label-width="formLabelWidth">

                        <el-upload
                            class="upload-demo"
                            ref="upload"
                            :with-credentials="true"
                            :limit="1"
                            :file-list="fileList"
                            :action="uploadUrl()"
                            :on-change="checkFile"                            
                            :http-request="savefileobj"
                            :auto-upload="false"
                            :on-remove="handleRemove"
                            :before-remove="beforeRemove"
                        >
                        <el-button size="small" type="primary">点击上传</el-button>
                        </el-upload>


                    </el-form-item>

  

:file-list="fileList" ---- 这个fileList是自己定义的一个文件列表，显示的文件就是这个里边的文件。

:action="uploadUrl()"  ----  是动态设置的文件上传路径。

uploadUrl(){

      return "http://?.?.?.?:8081/upgradePackage/uploadFiles";      ///   ?.?.?.?为你的IP或域名

},

 

:on-change="checkFile"  ---- 当选择文件时触发，通常用于判断文件格式、文件大小规范性问题

checkFile(file,fileList){

            this.fileList = fileList;

            // console.log(file)

            // console.log(fileList.length);

 

            //限制上传文件为5M

            var sizeIsSatisfy = file.size < 5*1024*1024 ? true:false;

            if(sizeIsSatisfy){

                this.fileSizeIsSatisfy = true;

                return true;

            }else{

                this.fileSizeIsSatisfy = false;

                return false;

            }

},

:http-request="savefileobj"  ----  选择完文件后触发方法，一般只是单纯涉及到文件上传可以使用此方法进行上传，如果是表单连同其它数据参数在点击确定按钮时一同上传时（:auto-upload="false"）通常用于存储文件。 

savefileobj(param)

 {

            this.fileObj = param.file;

            // console.log(this.fileObj);

},

:auto-upload="false"   ----  是否在选取文件后立即进行上传，默认为true。   也就是说设置成false后选择文件后不会触发savefileobj方法。   

可通过在方法中使用 this.$refs.upload.submit(); 触发:http-request方法 savefileobj 详情可见示例demo

                            

:before-remove="beforeRemove"   ----  删除方法前触发，通常用于确认删除判定。

beforeRemove(file, fileList) {

            return this.$confirm(`确定移除 ${ file.name }？`);

},

demo示例

页面弹框：

<!-- 升级包编辑弹框 -->
            <el-dialog title="升级包编辑" :visible.sync="showpackdiafrom" width="35%">
                <el-form :model="packfrom" style="height:250px;">
                    <el-form-item class="el-for-item" label="升级包名称" :label-width="formLabelWidth">
                        <el-input v-model="packfrom.customName" autocomplete="off" class="el-input__diatext"></el-input>
                    </el-form-item>

                    <el-form-item class="el-for-item" label="设备类型" :label-width="formLabelWidth">
                    <el-select class="el-input__diatext" v-model="packfrom.deviceTypeId" placeholder="设备类型">
                        <el-option
                        v-for="item in dtypes"
                        :key="item.id"
                        :label="item.deviceName"
                        :value="item.id">
                        </el-option>
                    </el-select>
                    </el-form-item>

                    <el-form-item class="el-for-item" label="升级包版本" :label-width="formLabelWidth">
                        <el-input v-model="packfrom.version" autocomplete="off" class="el-input__diatext"></el-input>
                    </el-form-item>
                    <el-form-item class="el-for-item" label="上传升级包" :label-width="formLabelWidth">   

                        <el-upload
                            class="upload-demo"
                            ref="upload"
                            :with-credentials="true"
                            :limit="1"
                            :file-list="fileList"
                            :action="uploadUrl()"
                            :on-change="checkFile"                            
                            :http-request="savefileobj"
                            :auto-upload="false"
                            :on-remove="handleRemove"
                            :before-remove="beforeRemove"
                        >
                        <el-button size="small" type="primary">点击上传</el-button>
                        </el-upload>

                    </el-form-item>                    
                    <el-form-item class="el-for-cont" label="备注">
                        <el-input type="textarea" v-model="packfrom.comment"></el-input>
                    </el-form-item>
                </el-form>
                
                <div slot="footer" class="dialog-footer">
                    <el-button @click="showpackdiafrom = false">取 消</el-button>
                    <el-button type="primary" @click="addorupdatepackinfo()">确 定</el-button>
                </div>
            </el-dialog>

表单提交按钮方法：

addorupdatepackinfo()
{       
            var key= this.packfrom.id;

            //手动上传文件，在点击确认的时候 校验通过才会去请求上传文件的url
            this.$refs.upload.submit();

            if(key==""||key==null||key==undefined)
            {   //新增
                if(this.fileList.length <= 0){
                    this.$message.error("请至少上传一个文件！");
                    return;
                }
                if(!this.fileSizeIsSatisfy){
                    this.$message.error("上传失败！存在文件大小超过5M！");
                    return;
                }//表单上传
                var form = new FormData();
                form.append("file", this.fileObj);
                form.append("customName", this.packfrom.customName);
                form.append("version", this.packfrom.version);
                form.append("deviceTypeId", this.packfrom.deviceTypeId);
                form.append("comment", this.packfrom.comment);
                axios({
                    method: 'post',
                    url: `${this.$APIURL}/upgradePackage/uploadFiles`,
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    },
                    data:form
                })
                .then(response => {
                    const { data } = response                
                    if(data.code=="0")
                    {
                        console.log(data);
                        this.showpackdiafrom = false;
                        this.showdpackmanager();         
                        this.$message({
                            message: '添加成功！',
                            type: 'success'
                        });    
                        this.packfrom={}; 
                        this.fileobj="";
                        this.fileList=[];   
                        this.fileSizeIsSatisfy=false;
                    }
                    else
                    {
                        this.$message.error(data.msg);
                    }
                }).catch(error => {
                    this.$message.error(error);
                })
            }
            else
            {        
                // 修改
                               

            }
},

上传控件调用到的方法：

uploadUrl(){
            return "http://?.?.?.?:8081/upgradePackage/uploadFiles";
        },
        // 判断文件大小
        checkFile(file,fileList){
            this.fileList = fileList;
            // console.log(file)
            // console.log(fileList.length);//限制上传文件为5M
            var sizeIsSatisfy = file.size < 5*1024*1024 ? true:false;
            if(sizeIsSatisfy){
                this.fileSizeIsSatisfy = true;
                return true;
            }else{
                this.fileSizeIsSatisfy = false;
                return false;
            }
        },
        savefileobj(param)
        {
            this.fileObj = param.file;
            // console.log(this.fileObj);
        },
　　　　  handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${ file.name }？`);
        },

data() 中涉及到的参数定义

showpackdiafrom:false,

packfrom:{},

fileList:[],

fileobj:"",    

fileSizeIsSatisfy:false,

基础用法及参数参考地址：https://element.eleme.cn/#/zh-CN/component/upload

参考文档：https://blog.csdn.net/qq_37025445/article/details/82876745

　　　　　http://www.mamicode.com/info-detail-2751030.html