vue2+上传文件

<template>
  <ElDialog
    :width="'600px'"
    :title="$t('common.channel')"
    :modelVisible="visible"
    @handleConfirm="handleConfirm"
    @handleClose="handleClose"
    :loading="loading"
    :isFooter="true"
  >
    <div class="upload-content">
      <el-upload
        class="upload-demo"
        ref="uploader"
        drag
        accept=".xlsx, .csv"
        :format="['xlsx', 'xls', 'csv']"
        :on-format-error="handleFormatError"
        :action="host + 'hsn/uploads'"
        :file-list="fileList"
        :on-change="changeFile1"
        :on-success="onFileUploadSuccess"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text" style="color: #fff">
          {{ $t('common.import.text') }}
          <div style="color: skyblue">{{ $t('common.import.text1') }}</div>
        </div>
      </el-upload>
    </div>
  </ElDialog>
</template>

<script>
import ElDialog from '@/components/ElDialog.vue'

import { import_areas } from '@/graphqls/common.js'
export default {
  name: 'Index',
  components: {
    ElDialog
  },
  props: {
    dialogTitle: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      visible: false,
      host: this.$TOOL.baseURL,
      path: '',
      fileList: [],
      loading: false
    }
  },
  watch: {
    dialogTitle: {
      immediate: true,
      handler(newVal) {
        if (newVal) {
          this.dialogTitles = newVal // 使用对象解构复制确保响应式
        }
      }
    }
  },
  mounted() {},
  methods: {
    // 弹窗打开
    open() {
      this.visible = true
      this.fileList = []
    },
    // 取消
    handleClose() {
      this.visible = false
    },
    // 确定
    async handleConfirm() {
      if (this.path) {
        if (
          this.path.indexOf('.xls') != -1 ||
          this.path.indexOf('.xlsx') != -1 ||
          this.path.indexOf('.csv') != -1
        ) {
          this.loading = true
          this.$API.auth.common
            .post({
              operationName: 'import_areas',
              variables: {
                path: this.path
              },
              query: import_areas
            })
            .then(({ data }) => {
              this.loading = false
              let imData = data.import_areas
              if (imData) {
                // let msg = `成功${imData.success}条，失败${imData.fail}条，失败原因：${imData.message}`

                if (imData.fail == 0 && imData.success != 0) {
                  this.$notify({
                    type: 'success',
                    duration: 5000,
                    title: this.$t('common.tishi'),
                    message: this.$t('common.importS')
                  })
                  this.path = null
                  this.getList()
                } else if (imData.fail == 0 && imData.success == 0) {
                  this.$notify({
                    type: 'error',
                    duration: 5000,
                    title: this.$t('common.tishi'),
                    message: this.$t('common.importFail')
                  })
                } else {
                  this.$notify({
                    type: 'warning',
                    duration: 5000,
                    title: this.$t('common.tishi'),
                    message: this.$t('common.importFail')
                  })
                }
              } else {
                this.$message.error(this.$t('common.importFail'))
              }
              this.path = null
              this.uploadLoading = false
              this.showUpload = false
            })
            .catch((err) => {
              this.uploadLoading = false
            })
        } else {
          this.$message.warning(this.$t('common.import.text3'))
        }
      } else {
        this.$message.warning(this.$t('common.import.text4'))
      }
    },
    handleFormatError(file) {
      console.log(file, 'file')
      this.$message.warning({
        title: '文件类型错误',
        duration: 5,
        desc:
          '文件：' +
          file.name +
          '文件格式不对，请选择后缀为.xlsx或者.xls、.csv文件。'
      })
    },
    changeFile1(file, fileList) {
      if (fileList.length > 1) {
        fileList.splice(0, 1)
      }
      this.fileList = fileList
    },
    onFileUploadSuccess(response, file, fileList) {
      console.log(response.response.id)
      this.path = response.response.id
    }
  }
}
</script>
<style lang="less" scoped>
.upload-content {
  clear: both;
  overflow: hidden;
  height: 220px;
  display: flex;
  margin-bottom: 30px;
  justify-content: space-around;
}
/deep/.el-upload-dragger {
  background-color: transparent !important;
}
</style>