前端vue2.0文件上传 带检验后缀名功能复制粘贴直接用

   <template>
  <el-upload
    class="upload-demo"
    ref="upload"
    action="#"
    :limit="1"
    :on-change="handsuccse"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :on-error="handerr"
    :file-list="fileList"
    :auto-upload="false"
  >
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <!-- <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div> -->
  </el-upload>
</template>

<script>
export default {
  data () {
    return {
      fileList: [],
      ruleForm: {
        file: ""
      }
    }
  },
  methods: {
    handsuccse (file, fileList) {
      var filetypes = [".doc", ".xls", ".pdf", ".docx", ".xlsx"]  //这个地方想加什么后缀名就写入什么后缀名
      console.log('file', file.raw) // 这个才是文件
      let type = file.raw.name.split(".")
      console.log(type[type.length - 1])
      let end = "." + type[type.length - 1]
      let find = filetypes.filter(item => {
        return item == end
      })
      console.log(find)
      if (find.length <= 0) {
        this.$message.error('请上传正确的文档格式')
        this.fileList = []
        return
      } else {
        this.ruleForm.file = file.raw
        this.$message.success('文件上传成功')

      }

    },
    handlePreview (file) {
      console.log(file)
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
      this.ruleForm.file = []

    },
    handerr (err, file, fileList) {

    },
  },



}
</script>