<template> <div class="upload-area-wrap"> <div class="upload-area"> <p class="tip-title">上传文件 - file upload</p> <div class="upload-detail-wrap"> <div class="upload-detail"> <div class="progressbar" v-show="showProgressBar"> <div :class="[fill?'fill':'clearfill']" :style="{width:widthcount+'%'}">{{proscount}}</div> <img class="d-pictures" :src="picUrl" width="30" height="30" alt="缩略图"> <span class="dictionary-name">{{textName}}</span> <span class="dictionary-name">{{textSize}}</span> <span class="dictionary-name">{{textformat}}</span> <i class="delete-d">删除</i> </div> </div> </div> <form class="uoload-wrap btn-primary file-uploads" enctype="multipart/form-data" > <i>+</i>select <label class="file" for="file"></label> <!--<input class="file" name="file" type="file" :acceptUrl = "acceptUrl" @change="uploadFile($event)"/>--> <input class="file" name="file" type="file" @change="uploadFile($event)"/> </form> </div> </div> </template> <script> import * as baseUrl from '../../../assets/common/url/url.js' export default { name:'fileUpload', // proops:{ // acceptUrl:{ // type:String, // default:'' // } // }, data(){ return { formData:'', name:'', file:[], acceptUrl:'', proscount:'', fill:'', clearfill:'clearfill', timer:'',//进度条定时器 fileData:'', showProgressBar:false, textName:'', textSize:'', textformat:'', picUrl:'', widthcount:'', } }, name:'SelectTheFile', created(){ }, methods:{ // 获取文件 uploadFile($event){ this.fill = false; this.showProgressBar = true; this.formData = new FormData(); for (let i = 0; i < $event.target.files.length; i++) { this.formData.append('file', $event.target.files[i]); this.file.push($event.target.files[i]); } //文件字节大小 console.log($event); let Osize = this.conver(this.formData.get('file').size); //文件类型 let subIndex =(this.formData.get('file').type).lastIndexOf('/')+1; let Oformat = this.formData.get('file').type; let data = this.formData.get('file'); this.textName = data.name; this.textSize = this.formatFileSize(data.size); this.textformat = Oformat.substring(Oformat.lastIndexOf('/')+1,Oformat.length); //this.textformat = Oformat.split("\/")[1]; console.log(this.formData.get('file')); // console.log($event.target.files); this.submit(this.formData); //进度条 // this.timeBar(); $event.target.value = ''; }, //进度条时间 timeBar(){ var self = this; self.fill != self.fill ; self.proscount = 0; self.timer = setInterval(()=>{ self.proscount ++; // console.log(this.proscount) self.fill = true; if( self.proscount == 100){ clearInterval(self.timer); } },10); }, //选择文档类型判断 checkFileType: function (fileType) { const acceptTypes = ['xls', 'doc', 'jpg']; for (var i = 0; i < acceptTypes.length; i++) { if (fileType === acceptTypes[i]) { return true; } } return false; }, formatFileSize: function (fileSize, idx) { var units = ["B", "KB", "MB", "GB"]; idx = idx || 0; if (fileSize < 1024 || idx === units.length - 1) { return fileSize.toFixed(1) + units[idx]; } return this.formatFileSize(fileSize / 1024, ++idx); }, //获取文件大小 conver(limit){ let size = ''; if(limit < 0.1*1024){ size = limit.toFixed(2)+'B' }else if(limit < 0.1*1024*1024){ size = (limit/1024).toFixed(2)+'KB' }else if(limit< 0.1*1024*1024*1024){ size = (limit/(1024*1024)).toFixed(2)+'MB' }else{ size = (limit/(1024*1024*1024)).toFixed(2)+'G' } return size; }, // 发送文件 submit(data) { var that = this; that.$ajax({ url:`${baseUrl.upload}`, method:'post', data:data, header:{ // "Access-Control-Allow-Origin":"http://192.168.20.191:9091", 'Content-Type': 'multipart/form-data', }, onUploadProgress:progressEvent=> {//原生获取上传进度的事件 if (progressEvent.lengthComputable) { // this.proscount = 0; this.fill != this.fill ; var complete = (progressEvent.loaded / progressEvent.total * 100 | 0) ; this.proscount = complete + '%'; this.fill = true ; this.widthcount = complete; } } }).then(res=>{ console.log(res); if(res.data.code == '0000'){ // alert('上传成功'); this.picUrl = res.data.data; }else{ alert('上传失败') } }).catch(err =>{ console.log(err); clearInterval(this.timer); alert('上传失败'); }); }, onUploadProgressSuccess:function(){ } } } </script> <style> .upload-area-wrap{ position: relative; width: 580px; height: 310px; margin: 30px auto; } .uoload-wrap{ display: inline-block; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 1px solid transparent; padding: .5rem .75rem; font-size: 1rem; line-height: 1.25; border-radius: .25rem; transition: all .15s ease-in-out; } .d-pictures{ float: left; } .dictionary-name{ display: inline-block; height: 30px; line-height: 30px; float: left; margin-left: 15px; } .upload-area{ width: 100%; min-height: 300px; border: 1px solid #8c939d; border-radius: 10px; background: #fff; } .upload-detail{ width: 100%; height: 230px; box-sizing: border-box; padding: 10px 10px; } .delete-d{ display: inline-block; color: #ff5e48; float: right; height: 30px; line-height: 30px; margin-right: 20px; } .tip-title{ margin:5px 10px; width: auto; } .btn-primary{ color: #fff; background-color: rgb(165, 232, 141); border-color: green; float: right; margin-right: 20px; } .file-uploads{ overflow: hidden; position: relative; text-align: center; display: inline-block; } label{ background: #fff; opacity: 0; font-size: 20em; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; position: absolute; width: 100%; height: 100%; } input[type = file]{ position: absolute; left: 0; top: 0; opacity: 0; width: 100%; height: 100%; z-index: 2; } .progressbar{ position: absolute; width:calc(100% - 20px); height:50px; } .fill{ /*animation:move 2s;*/ text-align: center; background: rgb(172, 242, 129); border-radius: 32px; } .clearfill{ background: none; width: 0; } @keyframes move{ 0%{ width: 0; } 100%{ width: 100%; } } </style>
vue之axios上传文件图片
最新推荐文章于 2024-07-11 20:17:45 发布