vue之axios上传文件图片

<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>