element ui el-upload上传附件,删除,预览,上传前验证,删除前验证
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
表单项:
file-list=“fileList” 上传附件显示文件名称
limit=“1” 限制上传数量为1
<el-form-item label="附件">
<el-upload
class="upload-demo"
:action="uploadUrl()"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:on-preview="previewAtt2"
:file-list="fileList"
:limit="1">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</el-form-item>
data 定义:
//附件内容
uploadData:[],
//附件内容(初始化用)
fileList:[],
方法:
// 上传
uploadUrl() {
return ctx+"file/uploadFile";
},
//上传成功
handleAvatarSuccess(res, file) {
const files = {
uid: file.uid,
fileName: res.data.fileName,
fileType: res.data.fileType,
fileSize: res.data.fileSize,
filePath: res.data.filePath,
bizType: "合同扫描件",
url: file.url
};
this.uploadData.push(files);
},
//上传之前
beforeAvatarUpload(file) {
const isLt2M = file.size / 1024 / 1024 < 10;
if (!isLt2M) {
this.$message.error('上传图片大小不能超过 10MB!');
}
return isLt2M;
},
//删除
handleRemove(file) {
for(var i = 0; i < this.uploadData.length; i++){
if(file.uid == this.uploadData[i].uid){
this.uploadData.splice(i,1)
}
}
},
// 删除前验证
beforeRemove(file){
},
//点击名称预览文件
previewAtt2(file) {
if(file.url){
window.open(ctx+"upload/"+file.url, '_blank');
}else{
var url = file.filePath;
window.open(ctx+"upload/"+url, '_blank');
}
},
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献6条内容
所有评论(0)