Element-upload

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<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>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script src="js/vue.js"></script>
		<script src="js/index.js"></script>
	</head>
	<body>
		<div class="app" style="width:40%;margin:0 auto;">
			<!-- 点击上传:通过 slot 你可以传入自定义的上传按钮类型和文字提示。
			可通过设置limit和on-exceed来限制上传文件的个数和定义超出限制时的行为。
			可通过设置before-remove来阻止文件移除操作。 -->
			<el-upload
			  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文件，且不超过500kb</div>
			</el-upload>
			
			
			
			<br />
			<!-- 用户头像上传:使用 before-upload 限制用户上传的图片格式和大小。 -->
			<el-upload
			  class="avatar-uploader"
			  action="https://jsonplaceholder.typicode.com/posts/"
			  :show-file-list="false"
			  :on-success="handleAvatarSuccess"
			  :before-upload="beforeAvatarUpload">
			  ![在这里插入图片描述]()
			  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
			</el-upload>
			
			
			
			<br />
			<!-- 照片墙:使用 list-type 属性来设置文件列表的样式。 -->
			<el-upload
			  action="https://jsonplaceholder.typicode.com/posts/"
			  list-type="picture-card"
			  :on-preview="handlePictureCardPreview"
			  :on-remove="handleRemove">
			  <i class="el-icon-plus"></i>
			</el-upload>
			<el-dialog :visible.sync="dialogVisible">
			  ![在这里插入图片描述]()
			</el-dialog>
			
			
			
			<br />
			<!-- 图片列表缩略图 -->
			<el-upload
			  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文件，且不超过500kb</div>
			</el-upload>
			
			
			
			
			<br />
			<!-- 上传文件列表控制:通过 on-change 钩子函数来对列表进行控制 -->
			<el-upload
			  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文件，且不超过500kb</div>
			</el-upload>
			
			
			
			
			<!-- 拖拽上传:drag -->
			<el-upload
			  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文件，且不超过500kb</div>
			</el-upload>
		</div>
		<script>
			new Vue({
				el:'.app',
				data() {
					  return {
						imageUrl: '',
						dialogImageUrl: '',
                        dialogVisible: false,
						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 }？`);
					  },
					  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;
					  },
					  handlePictureCardPreview(file) {
						this.dialogImageUrl = file.url;
						this.dialogVisible = true;
					  },
					  handleChange(file, fileList) {
						this.fileList = fileList.slice(-3);
					  }
				}
			})
		</script>
	</body>
</html>
猜你喜欢
