这篇文章给大家介绍了“在Vue项目中导入excel表失败怎么回事，如何处理”的相关知识，讲解详细，步骤过程清晰，有一定的借鉴学习价值，因此分享给大家做个参考，感兴趣的朋友接下来一起跟随小编看看吧。

有这么一个需求：一个导入按钮，点击按钮导入excel表，如果excel表中部分数据导入失败，则自动下载该部分导入失败数据的excel表，如果全部导入成功，则提示“导入成功”。

首先附上ElementUI的上传文件组件

Element - The world's most popular Vue UI framework

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

https://element.eleme.cn/#/zh-CN/component/upload

官网详细介绍upload组件的属性和使用方法，就不展开了，这里主要通过使用它实现开篇的导入excel表的需求。（在vue项目中需要引入ElementUI库，详细步骤请查阅官网）

1、引入ElementUI上传组件upload

<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  multiple
  :auto-upload="false"
  :file-list="fileList"
  :on-change="fileChange">
  <el-button type="primary">导入</el-button>
</el-upload>

页面效果

属性介绍

属性	说明	类型
action	必选参数，上传的地址	string
multiple	是否支持多选文件	boolean
auto-upload	是否在选取文件后立即进行上传	boolean
auto-upload我们设置为false，避免自动上传，以便使用自定义上传方式。
file-list	上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]	array
on-change	文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用	function(file, fileList)

2、点击导入按钮，选择文件（点击“打开”触发on-change）

此时可以通过fileChange方法在控制台打印查看文件结构

fileChange(file,fileList){
  console.log(file,'file')
  console.log(fileList,'fileList')
}

3、此时我们已经拿到选择的文件，可以自定义上传方式，将其发送至后端服务器

fileChange(file,fileList){
  console.log(file,'file')
  console.log(fileList,'fileList')
  let url = 'xxx'  //后端服务器API
  let headers = {
    'Content-Type':'multipart/form-data'   //自定义上传时，该请求头参数必填
  }
  let formData = ''
  for(let i = 0;i < fileList.length;i++){  //遍历文件数组，fileList有可能存在多个文件
    formData = new FormData()
    formData.append('name',fileList[i].name)
    formData.append('type','.xlsx')
    formData.append('file',fileList[i].raw)
  }
  this.$axios({
    headers: headers,
    method: 'post',
    data: formData,
    url: url,
    responseType:'blob'   //该参数必填，不然下载下来的excel表会提示文件损坏，无法打开
  }).then(res=>{
    if(res && res.data.size == 0){
      //若后台不返回流，说明全部数据导入成功，提示“导入成功”，不自动下载
      return
    }
    //如果后台返回流，说明部分数据导入失败，则自动下载导入失败数据的excel表
    let name = '导入失败数据.xlsx'     //自定义下载excel表名
    let blob = new Blob([res.data])
    let url = window.URL.createObjectURL(blob)
    let aLink = document.createElement('a')
    aLink.style.display = 'none'
    aLink.href = url
    //download 属性定义了下载链接的地址。href 属性必须在 <a> 标签中指定。
    aLink.setAttribute('download',name) 
    document.body.appendChild(aLink)
    aLink.click()
    document.body.removeChild(aLink)
    window.URL.revokeObjectURL(url)
    //下载结束之后可以执行其他操作，如刷新列表、友好提示等
  })
}

方法解析

formData是ajax2.0(XMLHttpRequest Level2)新提出的接口，利用FormData对象可以将form表单元素的name与value进行组合，实现表单数据的序列化，从而进行表单元素的拼接，提高工作效率。append向FormData 中添加新的属性值，如果FormData 对应的属性值存在则覆盖原值，否则新增一项属性值。

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream来用于数据操作。 

URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document绑定。这个新的URL 对象表示指定的 File对象或 Blob对象。

URL.revokeObjectURL() 静态方法用来释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象。当你结束使用某个 URL 对象之后，应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了。

总结：以上实现了自定义导入excel表，且自动下载接口返回的流，代码可以直接使用，但是请注意返回的数据response不一定与我的相同，具体看联调接口的返回数据。

以上就是关于“在Vue项目中导入excel表失败怎么回事，如何处理”的介绍了，感谢各位的阅读，希望这篇文章能帮助大家解决问题。如果想要了解更多知识，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JS中判断对象为空有哪些方法？

  JS中判断对象为空有哪些方法？有时候我们需要对象是否为空，而JS中判断对象为空的方法有很多，下面小编就给大家介绍五种方法，感兴趣的朋友可以参考学习。

• 如何用JS循环语句求解常见的数学问题

  JS利用循环解决的一些常见问题总结 目录 1. 打印0-100中3的倍数 2. 在页面中写入 1000-2000年中的闰年 3. 打印100以内所有偶数的和 4.求出1-1/2+1/3-1/4……1/100的和 5. 打印三角形 5.1 普通三角形 5.2 倒三角 5.3 等腰三角形 6.等腰梯形 7.输出100-200之间所有的质数 9. 有一个棋盘,有64个方格,在第一个方格里面放1粒芝麻重量是0.00001kg,第二个里面放2粒,第三个里面放4,棋盘上放的所有芝麻的重量 10.在页面上完成以一个九九乘法表 11.打印一个3行

• reduce使用场景有哪些，代码是什么

  目录累加/累积求最大/最小值格式化搜索参数反序列化搜索参数拉平嵌套数组实现 flat数组去重数组计数获取对象多个属性反转字符串不知道大家平常用 Reduce 多不多，反正本瓜用

• JavaScript中的数组拍平是什么意思，如何进行数组拍平处理

  数组扁平化是指将一个多维数组变为一维数组,下面这篇文章主要给大家介绍了关于JavaScript面试之如何实现数组拍平（扁平化）方法的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下

• 基于JS怎样实现控制电灯开关的效果？

  这篇文章主要为大家详细介绍了用js控制电灯开关，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下