VUE element-ui之导入excel模板至后端接口_elementui上传excel到后端

最后

好了,这就是整理的前端从入门到放弃的学习笔记,还有很多没有整理到,我也算是边学边去整理,后续还会慢慢完善,这些相信够你学一阵子了。

做程序员,做前端工程师,真的是一个学习就会有回报的职业,不看出身高低,不看学历强弱,只要你的技术达到应有的水准,就能够得到对应的回报。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

学习从来没有一蹴而就,都是持之以恒的,正所谓活到老学到老,真正懂得学习的人,才不会被这个时代的洪流所淘汰。

	<el-upload
 ref="upload"
 class="filter-item"
 action="#" 
 :before-upload="beforeUpload"
 type="primary"
 :http-request="uploadOk"
 :on-change="uploadExcel"
 :show-file-list="false"
 :file-list="fileList"
 :limit="limitUpload" 这里注意!!!:limit为上传个数(如果为1,那么只能上传一次,除二次调用需刷新页面)
 accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
 :auto-upload="false"
 >
                <el-button type="primary" size="mini" icon="el-icon-bottom-right">Excel导入</el-button>
   </el-upload>

组件内属性方法详细介绍可参考饿了么文档这里不再赘述
2.定义所需变量

data() {
	return {
		fileList: [], //上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]
		limitUpload: 100, //允许上传次数(不刷新页面情况下)
	}
}

3.调用方法即可

//上传前校验(其实如果在accept中限制了格式,这一步可有可无---)
    beforeUpload(file) {
      // 文件类型
      console.log(`上传前校验---`, file)
      const isType = file.type === 'application/vnd.ms-excel'
      const isTypeComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      const fileType = isType || isTypeComputer
      if (!fileType) {
        this.$message.error('上传文件只能是xls/xlsx格式!')
      }
      // 文件大小限制为2M
      const fileLimit = file.size / 1024 / 1024 < 2
      if (!fileLimit) {
        this.$message.error('上传文件大小不超过2M!')
      }
      return fileType && fileLimit
    },
    // 自定义上传(此方法我打印不出任何数据,注释了也不影响---)
    uploadOk(param) {
      // console.log(`上传成功---`, param)
      // const fileFormData = new FormData()
      // fileFormData.append('uploadFile', param.file)
      // console.log(`上传参数---`, param.file)
      // crudUser.uploadExcel(fileFormData).then(res => {
      // console.log(`上传成功???---`, res)
      // })
    },
    // excel表上传(方法调用在此方法中)
    uploadExcel(file, fileList) {
      const fileTemp = file.raw
      const fileName = file.raw.name
      const fileType = fileName.substring(fileName.lastIndexOf('.') + 1)
      // 判断上传文件格式
      if (fileTemp) {
        if ((fileType === 'xlsx') || (fileType === 'xls')) {
          const formData = new FormData() //这一步不能变
#### 总结

三套“算法宝典”

**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![28天读完349页,这份阿里面试通关手册,助我闯进字节跳动](https://img-blog.csdnimg.cn/img_convert/921d61c147522637cff31846545fe430.png)



算法刷题LeetCode中文版(为例)

人与人存在很大的不同,我们都拥有各自的目标,在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人,但是我深刻知道自己想要的是一年比一年有进步。

最后,我想说的是,无论你现在什么年龄,位于什么城市,拥有什么背景或学历,跟你比较的人永远都是你自己,所以明年的你看看与今年的你是否有差距,不想做咸鱼的人,只能用尽全力去跳跃。祝愿,明年的你会更好!

由于篇幅有限,下篇的面试技术攻克篇只能够展示出部分的面试题,详细完整版以及答案解析,有需要的可以关注
------------------------------------------------------------------

  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值