Vue:使用elementUI upload组件上传excel文件

应该是个假前端 专栏收录该内容
37 篇文章 0 订阅

elementUI官方的upload组件文档可点此查看
页面效果如下所示,支持文件的二次确认上传
在这里插入图片描述
demo中仅以excel举例,若需要支持其他格式,可修改accept值,具体代码如下:

<template>
  <div>
	  <el-upload drag
	       :limit=limitNum
	       :auto-upload="false"
	       accept=".xlsx"
	       :action="UploadUrl()"
	       :before-upload="beforeUploadFile"
	       :on-change="fileChange"
	       :on-exceed="exceedFile"
	       :on-success="handleSuccess"
	       :on-error="handleError"
	       :file-list="fileList">
	    <i class="el-icon-upload"></i>
	    <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
	    <div class="el-upload__tip" slot="tip">只能上传xlsx文件,且不超过10M</div>
  	</el-upload>
  <br/>
  <el-button size="small" type="primary" @click="uploadFile">立即上传</el-button>
  <el-button size="small">取消</el-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        limitNum: 1,  // 上传excell时,同时允许上传的最大数
        fileList: [],   // excel文件列表
      }
    },
    methods:{
      // 文件超出个数限制时的钩子
      exceedFile(files, fileList) {
        this.$message.warning(`只能选择 ${this.limitNum} 个文件,当前共选择了 ${files.length + fileList.length} 个`);
      },
      // 文件状态改变时的钩子
      fileChange(file, fileList) {
        console.log(file.raw);
        this.fileList.push(file.raw) ;
        console.log(this.fileList);
      },
      // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传
      beforeUploadFile(file) {
        console.log('before upload');
        console.log(file);
        let extension = file.name.substring(file.name.lastIndexOf('.')+1);
        let size = file.size / 1024 / 1024;
        if(extension !== 'xlsx') {
          this.$message.warning('只能上传后缀是.xlsx的文件');
        }
        if(size > 10) {
          this.$message.warning('文件大小不得超过10M');
        }
      },
      // 文件上传成功时的钩子
      handleSuccess(res, file, fileList) {
        this.$message.success('文件上传成功');
      },
      // 文件上传失败时的钩子
      handleError(err, file, fileList) {
        this.$message.error('文件上传失败');
      },
      UploadUrl:function(){
       // 因为action参数是必填项,我们使用二次确认进行文件上传时,直接填上传文件的url会因为没有参数导致api报404,所以这里将action设置为一个返回为空的方法就行,避免抛错
        return ""
      },
      uploadFile() {
        if (this.fileList.length === 0){
          this.$message.warning('请上传文件');
        } else {
          let form = new FormData();
          form.append('file', this.fileList);
          this.$axios({
            method:"post",
            url: "/statistical/uploadbug",
            headers:{
              'Content-type': 'multipart/form-data'
            },
            data:form
          }).then(
            res=>{

            },err =>{
            });
        }
      }

    }
  }
</script>

<style scoped>

</style>

有疑问的小伙伴可在文章下方留言,我会根据问题添加更详细的注释!

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页

打赏

简单随风

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值