Upload 上传

通过点击或者拖拽上传文件

点击上传

通过 slot 你可以传入自定义的上传按钮类型和文字提示。可通过设置limit和on-exceed来限制上传文件的个数和定义超出限制时的行为。可通过设置before-remove来阻止文件移除操作。

 1 <el-upload
 2   class="upload-demo"
 3   action="https://jsonplaceholder.typicode.com/posts/"
 4   :on-preview="handlePreview"
 5   :on-remove="handleRemove"
 6   :before-remove="beforeRemove"
 7   multiple
 8   :limit="3"
 9   :on-exceed="handleExceed"
10   :file-list="fileList">
11   <el-button size="small" type="primary">点击上传</el-button>
12   <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
13 </el-upload>
14 <script>
15   export default {
16     data() {
17       return {
18         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'}]
19       };
20     },
21     methods: {
22       handleRemove(file, fileList) {
23         console.log(file, fileList);
24       },
25       handlePreview(file) {
26         console.log(file);
27       },
28       handleExceed(files, fileList) {
29         this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
30       },
31       beforeRemove(file, fileList) {
32         return this.$confirm(`确定移除 ${ file.name }？`);
33       }
34     }
35   }
36 </script>

View Code