elment-ui文件上传详解
作者:互联网
文件上传总有各种问题,算是给自己一个总结吧
HTML
<el-form-item prop="" class="form-item">
<template slot="label">上传文件:</template>
<div class="form-info">
<el-popover ----弹出框设置
placement="top"
width="400"
trigger="click">
<el-upload
style="background-color: #E8F8F6"
accept=".pdf, .doc, .docx, .xls, .xlsx, .jpg, .png" ---限制的文件类型
:action="uploadUrl" ---动态地址
multiple ---可同时选择多个
:limit="5" ---最多上传5个文件
ref="uplode"
:on-preview="handlePreview" ---点击上传文件
:on-remove="handleRemove" ---删除已上传文件
:file-list="form.fileList" ---本地列表
:before-upload="beforeUpload" ---文件上传前校验
:on-change="fileChange" ---文件状态改变
:on-success="upSuccess" ---上传成功后
:on-exceed="handleExceed" ---多选文件提示
:on-error="upError" ---上传失败
:before-remove="beforeRemove" ---删除文件前
>
<el-button size="small" style="color:black;margin: 10px 0 0 10px;" class="actBtn actBtn-0">
上传文件
</el-button>
<div slot="tip" class="el-upload__tip">只能上传pdf/doc/docx/xls/xlsx/jpg/png文件,且不超过2M</div>
</el-upload>
<div slot="reference">
<svg-icon icon-class="up" className="up" sgv_width="20px" sgv_height="20px" />
<span style="font-size: 14px;">上传附件</span>
</div>
</el-popover>
</div>
</el-form-item>
个人理解,可能有些错误和不足,参考一下就行了
这个我是用了弹出框嵌套的文件上传
这是效果
js代码
getfile(file) { //调用的插件写的方法,预览用的
console.log(file);
FileSaver.saveAs(file.url,file.name);
},
// 删除已上传文件
handleRemove(file, fileList) {
console.log(file, fileList);
this.form.fileList = fileList
console.log(this.form.fileList)
},
// 点击上传的文件
handlePreview(file) {
console.log(file);
// this.dialogImageUrl = file.url;
// this.dialogVisible = true;
this.getfile(file)
},
// this.$message(); 为自定义全局提示
// 上传文件之前
beforeUpload(file) {
const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
const whiteList = ["pdf", "doc", "docx", "xls", "xlsx",'jpg','png'];
if (whiteList.indexOf(fileSuffix) === -1) {
this.$message("上传文件只能是 pdf、doc、docx、xls、xlsx、jpg、png格式", "error");
return false;
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
this.$message("上传文件大小不能超过 2MB", "error");
return false;
}
},
fileChange(file){
console.log(file);
},
//多选文件提示
handleExceed(files, fileList){
this.$message(`当前限制选择 5 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
},
// 上传成功
upSuccess(response, file, fileList) {
console.log('成功');
console.log(response, file, fileList);
if(response.success){
this.form.fileList.push({name: file.name, url: this.utils.getPicUrl()+response.items[0].filename, uid: file.uid})
}else{
this.form.fileList=this.form.fileList.splice(this.form.fileList.length-1,1)
this.$message.error(response.message);
}
console.log(this.form.fileList);
// this.$message("上传成功");
// this.showTaxt = false
},
// 上传失败
upError(e) {
this.$message.error("上传失败", "error");
},
// //移除提示
// beforeRemove(file, fileList) {
// return this.$confirm(`确定移除 ${ file.name }?`);
// },
标签:console,log,elment,fileList,详解,ui,file,message,上传 来源: https://blog.csdn.net/weixin_49050598/article/details/112538074