<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview"
:on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="10" :on-exceed="handleExceed"
:on-progress="progress"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
<div>{{fileList}}</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data() {
return {
fileList: [{
name: 'food.jpeg',
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
}, {
name: 'food2.jpeg',
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
},{
name: 'food3.jpeg',
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
}]
};
},
methods: {
handleRemove(file, fileList) {
console.log("fileList→",fileList);
console.log("file→",file);
this.fileList=fileList
},
handlePreview(file) {
// console.log(1)
// console.log("文件已上传时",file);
},
handleExceed(files, fileList) {
this.$message.warning(
`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }?`);
},
progress(event, file, fileList){
console.log("上传的事件对象event",event)
console.log("上传的文件信息file",file)
console.log("这是上传成功后的所有文件数组fileList",fileList)
console.log(fileList.length)
this.fileList=fileList
}
},
watch: {
fileList: {
handler(newName, oldName) {
console.log("新数据→",newName)
},
deep: true,//深度监听
// immediate: true//如果加了👈属性表示刚进来就调用一次监听的函数
}
}
})
</script>
</html>
多文件上传
最新推荐文章于 2024-04-18 17:58:31 发布