vue实现批量文件上传效果代码-html代码-BFW代码库

vue实现批量文件上传效果代码

代码语言：html

所属分类：上传

代码描述：vue实现批量文件上传效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js文件批量上传</title>
	<style>
		.upload_warp_img_div_del {
		  position: absolute;
		  top: 6px;
		  width: 16px;
		  right: 4px;
		}

		.upload_warp_img_div_top {
		  position: absolute;
		  top: 0;
		  width: 100%;
		  height: 30px;
		  background-color: rgba(0, 0, 0, 0.4);
		  line-height: 30px;
		  text-align: left;
		  color: #fff;
		  font-size: 12px;
		  text-indent: 4px;
		}

		.upload_warp_img_div_text {
		  white-space: nowrap;
		  width: 80%;
		  overflow: hidden;
		  text-overflow: ellipsis;
		}

		.upload_warp_img_div img {
		  max-width: 100%;
		  max-height: 100%;
		  vertical-align: middle;
		}

		.upload_warp_img_div {
		  position: relative;
		  height: 100px;
		  width: 120px;
		  border: 1px solid #2196F3;
		  margin: 0px 30px 10px 0px;
		  float: left;
		  line-height: 100px;
		  display: table-cell;
		  text-align: center;
		  background-color: #eee;
		  cursor: pointer;
		}

		.upload_warp_img {
		  border-top: 1px solid #D2D2D2;
		  padding: 14px 0 0 14px;
		  overflow: hidden
		}

		.upload_warp_text {
		  text-align: left;
		  margin-bottom: 10px;
		  padding-top: 10px;
		  text-indent: 14px;
		  border-top: 1px solid #2196F3;
		  font-size: 14px;
		}

		.upload_warp_right {
		  float: left;
		  width: 56%;
		  margin-left: 2%;
		  height: 100%;
		  border: 2px dashed #2196F3;
		  border-radius: 4px;
		  line-height: 130px;
		  color: #2196F3;
		}

		.upload_warp_left img {
		  margin-top: 32px;
		}

		.upload_warp_left {
		  float: left;
		  width: 40%;
		  height: 100%;
		  border: 2px dashed #2196F3;
		  border-radius: 4px;
		  cursor: pointer;
		}

		.upload_warp {
		  margin: 14px;
		  height: 130px;
		}

		.upload {
		  border: 1px solid #2196F3;
		  background-color: #fff;
		  width:600px;
		  border-radius: 4px;
		}

		.hello {
		  width: 600px;
		 
		  text-align: center;
		}
		.ml20{
			margin-left: 20px;
		}
		.c-red{
			color: red;
		}
	</style>
</head>
<body>
	<div id="app">
	  <div class="hello">
		<div class="upload">
		  <div class="upload_warp">
			<div class="upload_warp_left" @click="fileClick">
			  <img src="//repo.bfw.wiki/bfwrepo/icon/5dbed973981f9.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_70,h_70,/quality,q_90">
			</div>
			<div class="upload_warp_right" @drop="drop($event)" @dragenter="dragenter($event)" @dragover="dragover($event)">
			  或者将文件拖到此处
			</div>
		  </div>
		.........完整代码请登录后点击上方下载按钮下载查看