vue 基于excel的导入

Question

问题描述

实现导入模板，前端写好了，怎么导不进去

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

<import-excel :visible.sync="dialogImportVisible"

              title="导入信息"
              :post-api="postread"
              excel-template="/static/feils/信息导入.xlsx"
              @success="getData">
</import-excel>

导入组件

<template>
<el-dialog :title="title"

         :visible.sync="visible"
         append-to-body
         :before-close="handleClose">
<div class="upload-wrap">
  <div class="upload-input">
    <input type="file"
           class="upload-file-input"
           name="upload-file"
           id="orderUpload"
           accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
           @change="handleUploadChange">
    <el-button type="primary"
               class="pull-left">
      <i class="fa fa-folder-open-o"></i> {{btnText}}
    </el-button>
    <div class="upload-info">
      <span v-if="!uploadFile"
            style="display: inline-block; margin-top: 8px;">未选择文件</span>
      <span v-else>
        文件：{{uploadFile.name}}
        <br> 大小：{{uploadSize}}
      </span>
    </div>
  </div>
  <p class="pull-right" v-show="excelTemplate">
    <a :href="excelTemplate"
       class="btn btn-text">
      <i class="fa fa-file-excel-o"></i> {{templateText}}</a>
  </p>
  <div class="upload-hint">
    <slot></slot>
    <ul class="list-unstyled"
        style="color: #999; margin-bottom: 0;"
        v-if="hintShow&&!$slots.default">
      <li>1、请按模板文件格式填写。</li>
      <li>2、只支持上传 .xls .xlsx 文件。</li>
    </ul>
  </div>
</div>
<div class="text-right">
  <el-button :plain="true"
             type="warning"
             @click="onDissmis">取消</el-button>
  <el-button type="primary"
             @click="importOrder"
             :disabled="!uploadFile"
             :loading="importLoading">
    <i class="fa fa-fw fa-sign-in"></i> 导 入
  </el-button>
</div>

</el-dialog>
</template>

<script>
export default {

components: {

},
props: {
  title: {
    type: String,
    default: '导入'
  },
  visible: Boolean,
  postApi: {
    type: String,
    required: true
  },
  excelTemplate: String,
  templateText: {
    type: String,
    default: '下载模板文件'
  },
  btnText: {
    type: String,
    default: '上传文件'
  },
  hintShow: {
    type: Boolean,
    default: true
  }
},
data() {
  return {
    importLoading: false,
    uploadFile: null,
    uploadSize: '',
    uploadObj: {}
  }
},

computed: {

},

watch: {

},

created() {

},

mounted() {

},

methods: {
  reset() {
    this.uploadObj.value = ''
    this.uploadFile = null
    this.uploadSize = ''
  },

  handleUploadChange(e) {
    this.uploadObj = e.target
    var files = e.target.files || e.dataTransfer.files
    if (!files.length) {
      this.$message.error('读取文件错误，请重试！')
    } else {
      this.uploadFile = files[0]
      this.uploadSize = this.getFileSize(this.uploadFile.size)
    }
  },

  importOrder() {
    if (this.uploadFile) {
      const formData = new FormData()
      formData.append('file', this.uploadFile)

      this.importLoading = true
      this.$api.single(this.postApi, formData).then(res => {
        this.$message.success('成功导入 ' + Math.ceil(res.data) + ' 条数据！')
        this.reset()
        this.$emit('success', res.body)
      }).catch(err => {
        console.log(err)
        if (err && err.status === 413) {
          this.$message.error('文件过大，请减少文件体积后重新上传！(413)')
        } else {
          this.$message.error('文件上传失败，请重试！')
        }
        this.$emit('error', err)
      }).then(() => {
        this.importLoading = false
      })
    } else {
      this.$message.error('读取文件错误，请重试！')
    }
  },

  getFileSize(size) {
    var unit = ['B', 'KB', 'MB', 'GB']
    var index = 0
    while (size >= 1024 && index + 1 < unit.length) {
      index++
      size = size / 1024
    }
    return ~~(size * 100) / 100 + unit[index]
  },

  handleClose() {
    this.onDissmis()
  },

  onDissmis() {
    this.reset()
    this.$emit('update:visible', false)
  }
}

}
</script>

<style scoped>
.upload-wrap {

overflow: hidden;
margin-bottom: 10px;
line-height: initial;

}

.upload-input {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  display: inline-block;
  margin-bottom: 10px;
  *display: inline;
  *zoom: 1;}
  input.upload-file-input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer;
  }
.upload-info {
  float: left;
  margin-left: 10px;
  margin-top: 2px;
  font-size: 12px;
  color: #999;
}
.upload-hint {
  padding: 5px;
  margin: 10px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

</style>

你期待的结果是什么？实际看到的错误信息又是什么？

请问后台要写么？如果要，请指点一下。

Answer 1

先看请求是否正常发出，服务端是否正常接收到上传的文件，如果以上两点都没问题，那一定是服务出错了，让后端看吧！如果文件没能正确发送，请检查发送请求，看看formdata是否正常发送

Answer 2

在handleUploadChange里this.uploadFile也是空吗？