使用ElementUI中的upload组件上传Excel文件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_29918313/article/details/83780679

最初使用该组件实现图片上传是没有问题的，前后端配合，最终实现想要的效果，组件使用过代码如下:

<el-upload
   class='image-uploader'
   :multiple='true'
   :auto-upload='true'
   list-type='picture'
   :show-file-list='false'
   :before-upload="beforeUpload"
   :drag='true'
   action=''
   :http-request="uploadFile" >
   <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>

现在改为使用该组件实现Excel文件上传，组件的使用几乎是不变的，代码如下：

<el-upload
   class='image-uploader'
   :multiple='false'
   :auto-upload='true'
   list-type='text'
   :show-file-list='true'
   :before-upload="beforeUpload"
   :drag='true'
   action=''
   :limit="1"
   :on-exceed="handleExceed"
   :http-request="uploadFile" >
   <i class="el-icon-upload"></i>
   <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
   <div class="el-upload__tip" slot="tip">一次只能上传一个文件，仅限text格式，单文件不超过1MB</div>
</el-upload>

触发的方法如下代码：

// 上传文件之前的钩子
    beforeUpload (file) {
      console.log('beforeUpload')
      console.log(file.type)
      const isText = file.type === 'application/vnd.ms-excel'
      const isTextComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      return (isText | isTextComputer)
    },
    // 上传文件个数超过定义的数量
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，请删除后继续上传`)
    },
    // 上传文件
    uploadFile (item) {
      console.log(item)
      const fileObj = item.file
      // FormData 对象
      const form = new FormData()
      // 文件对象
      form.append('file', fileObj)
      form.append('comId', this.comId)
      console.log(JSON.stringify(form))
      // let formTwo = JSON.stringify(form)
      EnterAPI.iExcel(form).then(response => {
        console.log('MediaAPI.upload')
        console.log(response)
        this.$message.info('文件：' + fileObj.name + '上传成功')
      })
    }

上述代码是可以跑通的前端代码，我在调试的过程中，遇到问题是报错Status Code: 415 Unsupported Media Type。我在查资料的过程中，部分解决方案都指向content-type，因此我换成使用axios请求，带上content-type：application/json;charset=UTF-8;仍然报同样的错误，同时也有一种解决方式是所传的对象form,对他进行一个转化，但是同样遇到上述报错。

在这之后将问题抛向后台，发现使用该代码请求接口的时候，断点进不去，因此断定是后台接收类型有问题，最终得以解决。