饿了么上传组件使用

<!--  -->
<template>
    <div class="form_son" style="margin-right:0;">
      <!-- :headers='headerObj' :file-list="fileList" -->
      <el-upload
        :ref="htref"
        :data="tokenstr"
        :headers='headerObj'
        :disabled="!filetype"
        :action='uploadurl'
        :multiple='true'
        :file-list="fileList"
        :before-upload="beforeUpload"
        :on-remove="removefile"
        :on-success="successfile"
        :on-error="errorfile"
        :auto-upload="true">
        <el-select style="width:120px;margin-right: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 size="small" :disabled="!filetype"  class="smallbtn" type="primary">点击上传</el-button>
      </el-upload>
       <!-- @upsuccess 更改通知  -->
      <!-- :filetypeArr="filetypeArr" 传递选项 -->
      <!-- :uploadurl="uploadurl" 上传路径 -->
      <!-- :tokenstr="tokenstr" 传递data -->
      <!-- :clearfn="clearfn" 关闭弹窗时清空文件 -->
      <!-- :headerObj="headerObj" 上传头部-->
       <!-- :htref="'addupload'" ref -->
  </div>
</template>

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

  components: {},
  watch:{
    clearfn:function(val){
       this.$refs[this.htref].clearFiles()
       this.filetype=''
       this.$refs[this.htref].uploadFiles.length=0
       this.fileList.length=0
       this.$emit('upsuccess',[])
    }
  },
  methods: {
    beforeUpload(f){
      if(f.size===0){
        this.$meesage.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
      let allFile=this.fileList.map((item)=>{
        return {
            fileType:item.fileType,
            filePath:item.url,
            fileName:item.name
        }
      })
      this.$emit('upsuccess',allFile)
    },
    // 文件上传成功
    successfile(res,f,flist){
      if(res&&res.code===200){
        this.fileList=flist
        let l=this.fileList.length
        for (let i = 0; i < l; i++) {
          if(this.fileList[i].name===f.name){
            this.fileList[i].fileType=this.filetype
            this.fileList[i].url=res.data.filePath
          }
        }
        let allFile=this.fileList.map((item)=>{
          return {
              fileType:item.fileType,
              filePath:item.url,
              fileName:item.name
          }
        })
        this.$emit('upsuccess',allFile)
      }else{
        this.$message.error('文件上传失败')
        this.$refs[this.htref].uploadFiles.pop() //页面显示的列表去掉当前上传的文件项
      }
    },
    //文件上传失败
    errorfile(err,f,flist){
      this.$message.error('文件上传失败，请稍后再试')
    },
  },

  mounted(){
    this.$refs[this.htref].clearFiles()
    this.filetype=''
    this.$refs[this.htref].uploadFiles.length=0
    this.fileList.length=0
  }
}
</script>
<style lang='scss' scoped>
.form_row{
  width:100%;
  height:40px;
  line-height: 40px;
 text-align:left;
  font-size:14px;
  display:flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.form_son{
  height:100%;
  line-height: 40px;
 text-align:left;
  font-size:14px;
  margin-right:40px;
  display:flex;
  justify-content: flex-start;
  align-items:flex-start;
  span{
    display:inline-block;
    width:90px;
    height:100%;
    padding-right: 10px;
    overflow: hidden;	text-overflow:ellipsis;	white-space: nowrap;
  }
  em{
    display:inline-block;
    width:30px;
    height:100%;
  }
}
</style>