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