前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >将文件拖到此处,点击上传

将文件拖到此处,点击上传

作者头像
达达前端
发布2020-11-12 10:39:16
1.2K0
发布2020-11-12 10:39:16
举报
文章被收录于专栏:达达前端
代码语言:javascript
复制
<template>
  <div v-loading="loading">
    <el-upload
      ref="uploadExcel"
      class="upload-demo"
      drag
      :http-request="uploadFile"
      action="action"
      :limit="limitNum"
      :show-file-list="true"
      accept=".xlsx,.xls"
      :before-upload="beforeUploadFile"
      :on-change="fileChange"
      :on-exceed="exceedFile"
      :on-success="handleSuccess"
      :on-error="handleError"
      :file-list="fileList"
      :headers="myHeaders"
    >
      <i class="el-icon-upload" />
      <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
      <div slot="tip" class="el-upload__tip">只能上传xlsx、xls文件,且不超过10M</div>
    </el-upload>
  </div>
</template>

<script>
import axios from 'axios'
import { getToken } from '@/utils/auth'
export default {
  props: {
    // 上传到服务器的地址
    actionPath: {
      type: String,
      default: ''
    },
    // 最大允许上传个数
    limitNum: {
      type: Number,
      default: () => {
        return 100
      }
    }

  },
  data() {
    return {
      myHeaders: {
        token: this.$store.getters.token
      },
      fileList: [],
      loading: false,
      action: process.env.VUE_APP_BASE_API + this.actionPath
    }
  },
  methods: {
    // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传
    beforeUploadFile: function(file) {
      const extension = file.name.substring(file.name.lastIndexOf('.') + 1)
      const size = file.size / 1024 / 1024
      if (extension !== 'xlsx' && extension !== 'xls') {
        this.msgWarning('只能上传后缀以.xlsx、.xls结尾的文件')
        // this.$notify.warning({
        //   title: '警告',
        //   message: `只能上传后缀是.xlsx、.xls的文件`
        // })
        return false
      }
      if (size > 10) {
        this.msgWarning('文件大小不得超过10M')
        // this.$notify.warning({
        //   title: '警告',
        //   message: `文件大小不得超过10M`
        // })
        return false
      }
    },
    // 自定义上传方法
    uploadFile: function(file) {
      this.loading = false
      const formData = new FormData()
      formData.append('multipartFile', file.file)
      this.requestUpload(this.action, formData)
    },
    requestUpload: function(url, query) {
      axios({ headers: { 'Content-Type': 'multipart/form-data', 'token': getToken() }, method: 'POST', data: query, url: url })
        .then(res => {
          if (res && res.data && res.data.code === '00000000' && res.data.success) {
            this.$emit('toGetPageList')
            this.msgSuccess(res.data.msg)
          } else {
            this.fileList = this.fileList.slice(0, -1)
            this.msgWarning(res.data.msg)
          }
        })
        .catch(() => {
          this.fileList = this.fileList.slice(0, -1)
          this.msgWarning('网络异常')
        })
    },
    // 文件状态改变时的钩子
    fileChange: function(file, fileList) {
      // console.log(file)
      // console.log(fileList)
    },
    // 文件超出个数限制时的钩子
    exceedFile(files, fileList) {
      this.msgWarning(`只能选择 ${this.limitNum} 个文件,当前共选择了 ${files.length + fileList.length} 个`)
      // this.$notify.warning({
      //   title: '警告',
      //   message: `只能选择 ${
      //     this.limitNum
      //   } 个文件,当前共选择了 ${files.length + fileList.length} 个`
      // })
      return false
    },
    // 文件上传成功时的钩子
    handleSuccess: function(res, file, fileList) {
      console.log(res)
      if (res !== null) {
      // this.formData.url = res.data  //服务器返回的文件地址
        this.$refs.uploadExcel.clearFiles()// 清除上次上传记录
        this.$emit('closeDialog')
      }
      this.loading = false
    },
    // 文件上传失败时的钩子
    handleError: function(err, file, fileList) {
      this.fileList = fileList.slice(0, -1)
      this.msgError(err.msg)
      this.loading = false
    },
    // 处理进度条
    handleProgress: function(e, file, v) {
      this.loading = true
      console.log(e, file, v, '=====================')
    }
  }
}
</script>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档