2019-05-16 ElementUI - Upload组件的
2019-05-16 本文已影响0人
Ztry
slot - trigger & tip
- 直接在<el-upload>里边写的元素都会触发文件选择上传的弹窗；
- 如果在<el-upload>里边写的元素加上slot="trigger"，这个元素就可以用于触发文件选择上传弹窗；
- 如果在<el-upload>里边写的元素加上slot="tip"，这个元素就会默认到<el-upload>的下方显示文案提醒；
attribute
- action：上传的地址
- headers：上传的请求头部
- multiple：是否多选
- data：附带参数
- name：上传的文件字段名
- with-credentials：cookie由后台写然后上传才会带过去给后台
- show-file-list：是否显示已上传文件列表
- drag：是否启用拖拽上传
- accept：缩略图模式下此字段无效
-
- audio/*
- video/*
- image/*
- MIME_type
-
- list-type：文件列表的类型（text/picture/picture-card）
- auto-upload：选取文件自动上传，autoUpload为false后只执行了handleChange
- file-list：[{name: name,url:url}]
- disabled：是否禁用
- limit：最大允许上传个数
method：各种属性影响下各种方法调用的先后顺序
- autoUpload
- true：会生成一个fileList但this.fileList不会赋值->handleChange->beforeUpload->[httpRequest]->handleProgress->handleSuccess|handleError->handleChange
- false：会生成一个fileList但this.fileList不会赋值->handleChange
- beforeRemove->handleRemove
- handleExceed：文件超出时提示
- handleProgress注意要通过event.percent来加载进度条
- handleSuccess修改fileList
- beforeUpload：直接用上传文件的大小和类型就没有问题，如果需要图片尺寸大小的校验就需要用promise来判断，之前根据网上的demo写过一段代码，复制以下
- beforeRemove：删除之前可以进行一些提示然后同样是promise来判断
- handleRemove：移除文件之后的操作
- handleChange：文件状态改变时的钩子，file.status="ready|uploading|success|fail"
- clearFiles：清空已上传的文件列表（该方法不支持在 before-upload 中调用）
- abort(file: fileList 中的 file 对象)：取消上传请求
- submit：手动上传文件列表
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>ElementUI Upload</title>
<link rel="stylesheet" href="/lib/elementui@2.8.2/index.css" />
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<h1>ElementUI Upload1</h1>
<el-upload
class="upload-demo"
:action="action"
:headers="headers"
:multiple="multiple"
testdata="data"
:name="name"
:with-credentials="withCredentials"
:show-file-list="showFileList"
:drag="drag"
:accept="accept"
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-success="handleSuccess"
:on-error="handleError"
:on-progress="handleProgress"
:on-change="handleChange"
:before-upload="beforeUpload"
:before-remove="beforeRemove"
:list-type="listType"
:auto-upload="autoUpload"
:file-list="fileList"
testhttp-request="httpRequest"
:disabled="disabled"
:limit="limit"
:on-exceed="handleExceed"
ref="upload1"
>
<el-button
slot="trigger"
size="small"
type="primary"
@click.stop="btnClick('upload1')"
>点击上传</el-button
>
<el-collapse-transition>
<el-progress
:percentage="uploadProgress"
v-show="progressShow"
></el-progress>
</el-collapse-transition>
<div slot="tip" class="el-upload__tip">
只能上传jpg/png文件，且不超过500kb
</div>
</el-upload>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script src="/lib/elementui@2.8.2/index.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: function() {
return {
action: "/api/upload/",
multiple: true,
data: {
dataTest: 1
},
name: "test",
withCredentials: true,
showFileList: true,
drag: false,
accept: "image/*",
listType: "text", //text/picture/picture-card
autoUpload: true,
fileList: [],
disabled: false,
limit: 3,
uploadProgress: 0,
progressShow: false
};
},
computed: {
headers: function() {
return {};
}
},
methods: {
// 点击文件列表中已上传的文件时的钩子
handlePreview(file) {
console.log("TCL: handlePreview -> file", file);
if (file.response && file.response.url) {
window.open(file.response.url);
}
},
// 文件列表移除文件时的钩子
handleRemove(file, fileList) {
console.log(
"TCL: handleRemove -> file, fileList",
file,
fileList
);
this.fileList = fileList;
this.changeUploadBtnDisabled();
},
// 文件上传成功时的钩子
handleSuccess(response, file, fileList) {
console.log(
"TCL: handleSuccess -> response, file, fileList",
response,
file,
fileList
);
this.progressShow = false;
this.fileList = fileList;
this.changeUploadBtnDisabled();
},
// 文件上传失败时的钩子
handleError(err, file, fileList) {
console.log(
"TCL: handleError -> err, file, fileList",
err,
file,
fileList
);
this.progressShow = false;
},
// 文件上传时的钩子
handleProgress(event, file, fileList) {
debugger
console.log(
"TCL: handleProgress -> event, file, fileList",
event,
file,
fileList
);
this.progressShow = true;
// this.uploadProgress = parseInt(file.percentage); //这个获取是不正确的，存在上传进度问题
this.uploadProgress = parseInt(event.percent);
},
// 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
handleChange(file, fileList) {
console.log(
"TCL: handleChange -> file, fileList",
file,
fileList
);
},
// 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
beforeUpload(file) {
console.log("TCL: beforeUpload -> file", file);
this.uploadProgress = 0;
// let regImage = /(\/jpg|\/jpeg|\/gif|\/png|\/bmp)$/;
// let _this = this;
// if (!regImage.test(file.type)) {
// this.$AlertTip("请上传正确的图片格式文件");
// return false;
// }
// const isLt2M = file.size / 1024 / 1024 < 2;
// if (!isLt2M) {
// this.$AlertTip("上传的图片最大不能超过2M");
// return false;
// }
// const isSize = new Promise(function(resolve, reject) {
// let width = 200;
// let height = 200;
// let _URL = window.URL || window.webkitURL;
// let img = new Image();
// img.onload = function() {
// let valid =
// img.width == width && img.height == height;
// valid ? resolve() : reject();
// };
// img.src = _URL.createObjectURL(file);
// }).then(
// () => {
// return file;
// },
// () => {
// _this.$AlertTip("上传的icon必须是200*200!");
// return Promise.reject();
// }
// );
// return isSize;
},
// 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。
beforeRemove(file, fileList) {
console.log(
"TCL: beforeRemove -> file, fileList",
file,
fileList
);
},
// 覆盖默认的上传行为，可以自定义上传的实现
httpRequest() {
console.log("TCL: httpRequest -> httpRequest");
},
// 文件超出个数限制时的钩子
handleExceed(files, fileList) {
console.log(
"TCL: handleExceed -> files, fileList",
files,
fileList
);
},
btnClick(refsName) {
console.log("btnClick", event);
if (this.fileList.length < this.limit) {
var input = this.$refs[refsName].$refs[
"upload-inner"
].$refs["input"];
input.value = null;
input.click();
}
},
changeUploadBtnDisabled() {
var button = this.$refs["upload1"].$refs["upload-inner"]
.$children[0].$el;
if (this.fileList.length >= this.limit) {
// 加上is-disabled类
button.classList.add("is-disabled");
} else {
// 去掉is-disabled类
button.classList.remove("is-disabled");
}
}
}
});
</script>
</body>
</html>
总结
- 之前在开发工作中发现el-upload的disabled设置为true之后就不能删除列表；如果设置为false，同时把el-button设置为disabled为true时，又不能阻止el-upload的重新上传，所以查看源码发现是这段代码控制的调起文件上传窗口的同时知道应该阻止el-button的冒泡（发现el-button的disabled为true时无法触发click，也无法阻止冒泡），给el-button添加is-disabled这个类显示出disabled的假象，所以才多了btnClick和changeUploadBtnDisabled这两个函数
// upload.vue: https://unpkg.com/element-ui@2.8.2/packages/upload/src/upload.vue
handleClick() {
if (!this.disabled) {
this.$refs.input.value = null;
this.$refs.input.click();
}
},
- 觉得如果不用更改源码能达到需求要求，我是不想轻易改动源码的，可以通过源码来学习然后根据需求加一层修改，现在还是小白，还有很长的路要走，加油！
