阅读背景:

vue 上传单个图片自定义增加progress改良用户体验

来源:互联网 
<el-tab-pane label="开发商logo" name="first" style="position: relative;">
    	<el-upload
		  class="avatar-uploader"
		  action="https://jsonplaceholder.typicode.com/posts/"		 
		  :show-file-list="false"
		  :on-success="handleAvatarSuccess"	
		  :on-error="handleAvatarError"
		  :on-remove="handleRemove"		  
		  :on-progress="handleProgress"
		  :before-upload="beforeAvatarUpload">
		  <img v-if="imageUrl" :src="imageUrl" class="avatar">
		  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
		  <p style="position: absolute;bottom: 0;background: rgba(0,0,0,.3);color:#fff;width: 100%;margin: 0;padding: 5px;">点击上传图片</p>
		  <el-progress v-show="showFlag" type="circle" :percentage="progressing" :status="status" style="position: absolute;top:10%;left:15%;" ></el-progress>		</el-upload>
    </el-tab-pane>
<el-tab-pane label="开发商logo" name="first" s



你的当前访问异常,请进行认证后继续阅读剩余内容。

分享到: