通过点击或者拖拽上传文件实现上传功能,常见于文件、文件夹或图片上传,使用挺频繁的。需要熟练掌握
通过 slot 你可以传入自定义的上传按钮类型和文字提示。可通过设置
limit
和on-exceed
来限制上传文件的个数和定义超出限制时的行为。可通过设置before-remove
来阻止文件移除操作。
- class="upload-demo"
- action="https://jsonplaceholder.typicode.com/posts/"
- :on-preview="handlePreview"
- :on-remove="handleRemove"
- :before-remove="beforeRemove"
- multiple
- :limit="3"
- :on-exceed="handleExceed"
- :file-list="fileList">
- <el-button size="small" type="primary">点击上传el-button>
- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kbdiv>
- <script>
- export default {
- 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'}]
- };
- },
- methods: {
- handleRemove(file, fileList) {
- console.log(file, fileList);
- },
- handlePreview(file) {
- console.log(file);
- },
- handleExceed(files, fileList) {
- this.$message.warning(`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
- },
- beforeRemove(file, fileList) {
- return this.$confirm(`确定移除 ${ file.name }?`);
- }
- }
- }
- script>
2.用户头像上传
使用 before-upload
限制用户上传的图片格式和大小。
- class="avatar-uploader"
- action="https://jsonplaceholder.typicode.com/posts/"
- :show-file-list="false"
- :on-success="handleAvatarSuccess"
- :before-upload="beforeAvatarUpload">
- <img v-if="imageUrl" :src="imageUrl" class="avatar">
- <i v-else class="el-icon-plus avatar-uploader-icon">i>
- el-upload>
-
- <style>
- .avatar-uploader .el-upload {
- border: 1px dashed #d9d9d9;
- border-radius: 6px;
- cursor: pointer;
- position: relative;
- overflow: hidden;
- }
- .avatar-uploader .el-upload:hover {
- border-color: #409EFF;
- }
- .avatar-uploader-icon {
- font-size: 28px;
- color: #8c939d;
- width: 178px;
- height: 178px;
- line-height: 178px;
- text-align: center;
- }
- .avatar {
- width: 178px;
- height: 178px;
- display: block;
- }
- style>
-
- <script>
- export default {
- data() {
- return {
- imageUrl: ''
- };
- },
- methods: {
- handleAvatarSuccess(res, file) {
- this.imageUrl = URL.createObjectURL(file.raw);
- },
- beforeAvatarUpload(file) {
- const isJPG = file.type === 'image/jpeg';
- const isLt2M = file.size / 1024 / 1024 < 2;
-
- if (!isJPG) {
- this.$message.error('上传头像图片只能是 JPG 格式!');
- }
- if (!isLt2M) {
- this.$message.error('上传头像图片大小不能超过 2MB!');
- }
- return isJPG && isLt2M;
- }
- }
- }
- script>
3.照片墙
使用 list-type
属性来设置文件列表的样式。
- action="https://jsonplaceholder.typicode.com/posts/"
- list-type="picture-card"
- :on-preview="handlePictureCardPreview"
- :on-remove="handleRemove">
- <i class="el-icon-plus">i>
- <el-dialog :visible.sync="dialogVisible">
- <img width="100%" :src="dialogImageUrl" alt="">
- el-dialog>
- <script>
- export default {
- data() {
- return {
- dialogImageUrl: '',
- dialogVisible: false
- };
- },
- methods: {
- handleRemove(file, fileList) {
- console.log(file, fileList);
- },
- handlePictureCardPreview(file) {
- this.dialogImageUrl = file.url;
- this.dialogVisible = true;
- }
- }
- }
- script>
4.文件缩略图
使用 scoped-slot
去设置缩略图模版。
- action="#"
- list-type="picture-card"
- :auto-upload="false">
- <i slot="default" class="el-icon-plus">i>
- <div slot="file" slot-scope="{file}">
- <img
- class="el-upload-list__item-thumbnail"
- :src="file.url" alt=""
- >
- <span class="el-upload-list__item-actions">
- <span
- class="el-upload-list__item-preview"
- @click="handlePictureCardPreview(file)"
- >
- <i class="el-icon-zoom-in">i>
- span>
- <span
- v-if="!disabled"
- class="el-upload-list__item-delete"
- @click="handleDownload(file)"
- >
- <i class="el-icon-download">i>
- span>
- <span
- v-if="!disabled"
- class="el-upload-list__item-delete"
- @click="handleRemove(file)"
- >
- <i class="el-icon-delete">i>
- span>
- span>
- div>
- el-upload>
- <el-dialog :visible.sync="dialogVisible">
- <img width="100%" :src="dialogImageUrl" alt="">
- el-dialog>
- <script>
- export default {
- data() {
- return {
- dialogImageUrl: '',
- dialogVisible: false,
- disabled: false
- };
- },
- methods: {
- handleRemove(file) {
- console.log(file);
- },
- handlePictureCardPreview(file) {
- this.dialogImageUrl = file.url;
- this.dialogVisible = true;
- },
- handleDownload(file) {
- console.log(file);
- }
- }
- }
- script>
5.图片列表缩略图
- class="upload-demo"
- action="https://jsonplaceholder.typicode.com/posts/"
- :on-preview="handlePreview"
- :on-remove="handleRemove"
- :file-list="fileList"
- list-type="picture">
- <el-button size="small" type="primary">点击上传el-button>
- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kbdiv>
- <script>
- export default {
- 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'}]
- };
- },
- methods: {
- handleRemove(file, fileList) {
- console.log(file, fileList);
- },
- handlePreview(file) {
- console.log(file);
- }
- }
- }
- script>
6.上传文件列表控制
通过 on-change
钩子函数来对列表进行控制
- class="upload-demo"
- action="https://jsonplaceholder.typicode.com/posts/"
- :on-change="handleChange"
- :file-list="fileList">
- <el-button size="small" type="primary">点击上传el-button>
- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kbdiv>
- <script>
- export default {
- 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'
- }]
- };
- },
- methods: {
- handleChange(file, fileList) {
- this.fileList = fileList.slice(-3);
- }
- }
- }
- script>
7.拖拽上传
- class="upload-demo"
- drag
- action="https://jsonplaceholder.typicode.com/posts/"
- multiple>
- <i class="el-icon-upload">i>
- <div class="el-upload__text">将文件拖到此处,或<em>点击上传em>div>
- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过500kbdiv>
8.手动上传
- class="upload-demo"
- ref="upload"
- action="https://jsonplaceholder.typicode.com/posts/"
- :on-preview="handlePreview"
- :on-remove="handleRemove"
- :file-list="fileList"
- :auto-upload="false">
- <el-button slot="trigger" size="small" type="primary">选取文件el-button>
- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器el-button>
- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kbdiv>
- <script>
- export default {
- 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'}]
- };
- },
- methods: {
- submitUpload() {
- this.$refs.upload.submit();
- },
- handleRemove(file, fileList) {
- console.log(file, fileList);
- },
- handlePreview(file) {
- console.log(file);
- }
- }
- }
- script>
关于上传组件的大致内容就是这些,需要继续深入浅出的,可前往上传组件
-
相关阅读:
SpringBoot测试类
<html dir=ltr>是什么意思?
java网络游戏后台管理系统计算机毕业设计MyBatis+系统+LW文档+源码+调试部署
Oracle 与 MySQL 的区别总结
使用POI实现操作Excel文件。
Python:【基础语法】 deque()用法
CY3.5/CY5/CY5.5/CY7/CY7.5荧光标记壳多糖/壳质/角素Chitin
CS224W - Colab 5 学习笔记
Python GDAL读取栅格数据并基于质量评估波段QA对指定数据加以筛选掩膜
极智嘉(Geek+)官宣重磅合作伙伴,再度赋能仓储自动化解决方案落地
-
原文地址:https://blog.csdn.net/W2457307263/article/details/132765331
-
最新文章
-
C++11 线程同步接口std::condition_variable和std::future的简单使用
Go runtime 调度器精讲(十一):总览全局
Spring框架漏洞总结
Angular 18+ 高级教程 – 国际化 Internationalization i18n
基于Tauri2+Vue3搭建桌面端程序|tauri2+vite5多窗口|消息提醒|托盘闪烁
ComfyUI 基础教程(五) —— 应用 IP-Adapter 实现图像风格迁移
网络空间的“边水往事”?针对华语黑产及用户进行攻击的 APT-K-UN3 活动分析
伪装“黑神话悟空修改器”传播木马的活动分析
全球蓝屏后,微软决定将安全踢出Windows内核
Java读取寄存器数据的方法