基于element的上传组件的上传功能

<!--  -->
<template>
    <div v-loading="loadbool" element-loading-text="正在发送">
        <!--  list-type="picture-card" -->
      <el-upload
       class="codeup"
        ref="codeupref"
        :data="tokenstr"
        :headers='headerObj'
        :disabled="!filetype"
        :action='uploadurl'
        :multiple='true'
        accept="image/*"
        :file-list="fileList"
        :before-upload="beforeUpload"
        :on-remove="removefile"
        :on-success="successfile"
        :on-error="errorfile"
        :auto-upload="true">
        <el-select style="width:40%;margin-right:10px;margin-bottom:10px" v-model="filetype" placeholder="请选择">
          <el-option v-for="item in filetypeArr" :key="item.value"  :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-button style="height:40px;width:40%;" size="small" :disabled="!filetype"  class="smallbtn" type="primary">选择图片</el-button>
      </el-upload>
      <el-button style="height:60px;width:100%;position:absolute;bottom:0px;left:0;" size="small" :disabled="fileList.length===0"  class="smallbtn" @click="send" type="primary">提交</el-button>
    </div>
</template>

<script>
export default {
//   props:[], 
  data () {
    return {
      loadbool:false,
      filetype:'',//文件类型
      fileList:[],// 成功上传文件数组
      filetypeArr:[],
      tokenstr:{},
      headerObj:{},
      codeid:''
    }
  },

  components: {},
  computed:{
    uploadurl:function(){return this.api.uploadurl},//.uploadurl
  },
  watch:{
  },
  methods: {
    beforeUpload(f){
      if(f.size===0){
        this.$meesage.warning('空文件不能上传')
        return false
      }
      if(f.type.split('/')[0].toLowerCase()!=='image'){
        this.$message.warning('只能上传图片类文件')
        return false
      }
      let x=this.fileList.find((item)=>{return item.name===f.name})
      if(x){
        this.$message.warning('文件名重复')
        return false
      }
    },
    // 移除文件列表文件
    removefile(f,flist){
      this.fileList=flist
    },
    // 文件上传成功
    successfile(res,f,flist){
      if(res&&res.code===200){
        let l=flist.length
        for (let i = 0; i < l; i++) {
          if(flist[i].name===f.name){
            flist[i].fileType=this.filetype
            flist[i].url=res.data.filePath
          }
        }
        this.fileList=flist
      }else{
        this.$message.error('文件上传失败')
        this.$refs['codeupref'].uploadFiles.pop() //页面显示的列表去掉当前上传的文件项
      }
    },
    //文件上传失败
    errorfile(err,f,flist){
      this.$message.error('文件上传失败，请稍后再试')
    },
    //发送确认
    send(){
       this.$confirm('<span>请确认应上传图片已全部上传完毕。<br> 确定发送吗?</span>',{
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            customClass:'codefirmbox',
            dangerouslyUseHTMLString:true,
            type: 'warning'
          }).then(() => {
            this.senddata()
          }).catch(()=>{
            this.$message.info('已取消发送')
          }) 
    },
    //发送
    senddata(){
      this.loadbool=true
      let that=this
      let sendarr=this.getsendfile(this.fileList)
      this.axios.post('/Api/contract/uploadmessage/uploadPicInfo',{
         codeid:this.$route.query.codeid,             
         url:JSON.stringify(sendarr), 
         token:this.$route.query.userId            
      },{ headers:{bookNumber:this.$route.query.bookNumber} }).then(res=>{
         if(res.data.code===200){
            this.$message.success('发送成功')
            setTimeout(() => {
              that.closeWindow()
            }, 1500);
         }else{
            this.$message.error('发送失败')
         }
      }).catch(err=>{
         this.$message.error('发送失败')
      }).finally(()=>{
        this.loadbool=false
      })
    },
    // 转成提交数据使用的格式
    getsendfile(arr){
      return arr.map((item)=>{
          return {
              fileType:item.fileType,
              filePath:item.url,
              fileName:item.name
          }
        })
    },
    // 弹窗
    closeWindow(){
      var userAgent = navigator.userAgent; 
      if(userAgent.indexOf('MicroMessenger') > -1){
        WeixinJSBridge.call('closeWindow');
      }else if (userAgent.indexOf('Firefox') != -1 || userAgent.indexOf('Chrome') !=-1) { 
        window.location.href='about:blank'; 
      }else if(userAgent.indexOf('Android') > -1 || userAgent.indexOf('Linux') > -1){ 
        window.opener=null;window.open('about:blank','_self').close(); 
      }else { 
        window.opener = null; 
        window.open('about:blank', '_self'); 
        window.close(); 
      } 
    }
  },

  mounted(){
    this.filetype=''
    this.$refs['codeupref'].clearFiles()
    this.$refs['codeupref'].uploadFiles.length=0
    this.fileList.length=0
    this.filetypeArr=JSON.parse(decodeURIComponent(this.$route.query.filetypeArr)) || []
    this.tokenstr={'token': this.$route.query.userId} ||{}
    this.headerObj={bookNumber:this.$route.query.bookNumber} ||{}
    this.codeid=this.$route.query.codeid ||''
  }
}
</script>
<style>
.codefirmbox{
    width:90%;
    margin:0 auto;
}
</style>
<style lang='scss' scoped>
.codeup{
  display:flex;
flex-direction: column;
  padding:4%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;
}
.el-upload-list{
    width:100%;
}
</style>