详解Vue ElementUI手动上传excel文件到服务器

概述

具体需求场景如下:

选择excel文件后,需要把导入的excel文件手动上传到后台服务器,并将导入成功后的统计结果显示出来。官网也有手动上传的示例,通过 action="url" 传入地址的方式,但在实际项目中请求需要自己配置,下面具体说明实现的方法。

说明:

在上传文件到展示统计结果,我们后端给了两个接口:首先调用文件上传接口,上传成功后,根据后端返回的mark再调用统计结果接口。

属性设置

.vue文件

<el-row>
    <div class="el-form-item__content">
        <el-upload ref="upload"
            accept=".xls,.xlsx"
            action="#"
            :auto-upload="false"
            :multiple="false"
            :file-list="fileList"
            :before-upload="beforeUpload"
            :http-request="uploadHttpRequest"
            :on-remove="fileRemove"
            :on-change="fileChange">
            <el-button size="small" type="primary">选择文件</el-button>
            <div slot="tip" class="el-upload__tip">一次只能上传一个xls/xlsx文件,且不超过10M</div>
        </el-upload>
    </div>
</el-row>
<el-row>
    <el-button size="small" @click="closeDialog">取 消</el-button>
    <el-button type="primary" size="small" @click="submitUpload">上 传</el-button>
    <el-button type="primary" size="small" @click="downloadRes">下载反馈结果</el-button>
</el-row>

其中:

  • action:上传的地址,可以不用过多关注,但也不建议删除,可用普通字符串代替
  • auto-upload:是否自动上传,因这里是手动上传,所以设置为false
  • multiple:是否支持多选,此处设置为 false
  • file-list:上传的文件列表数组
  • before-upload:上传文件之前的钩子,参数为上传的文件,可以在这里判断上传文件的类型,文件大小等
  • http-request:自定义上传的方法,会覆盖默认的上传行为(即action="url")
  • on-remove:上传文件移除时触发的方法
  • on-change:上传文件状态(添加,上传成功或失败)改变时触发的方法

处理逻辑

逻辑处理代码如下:

methods: {
    // 上传文件之前的钩子:判断上传文件格式、大小等,若返回false则停止上传
    beforeUpload(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格式!')
        }

        // 文件大小限制为10M
        const fileLimit = file.size / 1024 / 1024 < 10;
        if(!fileLimit) {
            this.$message.error('上传文件大小不超过10M!');
        }
        return fileType && fileLimit
    },
    // 自定义上传方法,param是默认参数,可以取得file文件信息,具体信息如下图
    uploadHttpRequest(param) {
        const formData = new FormData() //FormData对象,添加参数只能通过append('key', value)的形式添加
        formData.append('file', param.file) //添加文件对象
        formData.append('uploadType', this.rulesType)
        const url = `${this.myBaseURL}/operation/ruleImport/importData` //上传地址
        axios.post(url, formData)
            .then( res => {
                const { data: { code, mark } } = res
                if(code === 0) {
                    param.onSuccess()  // 上传成功的文件显示绿色的对勾
                    this.uploadMark = mark
                }
                return this.countData(this.uploadMark) //根据响应的 mark 值调用统计结果接口,返回一个promise以便进行链式调用
            })
            .then( res => { //链式调用,统计结果的响应
                const { data: { code, data } } = res
                if(code === 0) {
                    console.log('统计结果', data)
                }
            })
            .catch( err => {
                console.log('失败', err)
                param.onError() //上传失败的文件会从文件列表中删除
            })
    },
    // 统计结果
    countFile(mark) {
        return new Promise((resolve, reject) => {
            axios
                .get(`/operation/ruleImport/countData?mark=${mark}`)
                .then(res => {
                    resolve(res)
                })
                .catch(error => {
                    reject(error)
                })
        })
    },
    // 点击上传:手动上传到服务器,此时会触发组件的http-request
    submitUpload() {
        this.$refs.upload.submit()
    },
    // 文件发生改变
    fileChange(file, fileList) {
        if (fileList.length > 0) {
            this.fileList = [fileList[fileList.length - 1]] // 展示最后一次选择的文件
        }
    },
    // 移除选择的文件
    fileRemove(file, fileList) {
        if(fileList.length < 1) {
            this.uploadDisabled = true //未选择文件则禁用上传按钮
        }
    },
    // 取消
    closeDialog() {
        this.$refs.upload.clearFiles() //清除上传文件对象
        this.fileList = [] //清空选择的文件列表
        this.$emit('close', false)
    }
}

http-request 的param参数,打印结果如图。通过param.file取得当前文件对象。

以上就是详解Vue ElementUI手动上传excel文件到服务器的详细内容,更多关于Vue ElementUI手动上传excel文件到服务器的资料请关注我们其它相关文章!

(0)

相关推荐

  • vue+iview实现文件上传

    vue+iview文件上传(base64编码.类型验证.大小限制.多文件上传及文件预览) ​ iview对文件上传提供了一个专门的标签Upload,不过这个标签默认需要一个接口action属性,但一般我们向后台上传文件并不会选择文件直接就上传了 而是需要和其他的值一起发送请求给后台,并且文件都是转成base64编码. iview提供了一个方法阻止默认上传:before-upload这个方法是在上传文件之前做的一些操作,当这个方法返回false表示手动上传,不会通过action属性来提交文件 ba

  • vue 图片裁剪上传组件的实现

    先看一下总体效果: 上传文件做了大小和类型的限制,在动图中无法展现出来. 使用file类型的input实现选择本地文件 但是浏览器原生的文件上传按钮的颜值不尽人意,而且按钮上的文字是无法改变的,我需要把这个上传文件的按钮改造一下. 方法1:使用label元素来触发一个隐藏的file类型的 input元素:(缺点:在多人开发时,可能出现重复的元素id,导致难以预料的bug) <input type="file" id='up_file_input' v-show='false' &

  • vue+elementUI 实现内容区域高度自适应的示例

    步骤很简单: 通过动态绑定属性给<el-main></el-main>绑定高度,而高度通过 innerHeight 获取,减去你的头部和底部高度,剩下的就是整个内容区域的高度了!话不多说,上代码 //defaultHeight是绑定的属性 <el-main :style="defaultHeight"> <router-view /> </el-main> //注意:这里的defaultHeight必须是对象,不懂的可以去官网

  • 解决vue2中使用elementUi打包报错的问题

    bug1.找不到element-ui/lib/theme-default/index.css 解决:修改路径为 element-ui/lib/theme-chalk/index.css 原因:elementUi升级时遗留bug bug2: ERROR in static/js/app.77ab8a3664d32f2b9c76.js from UglifyJs Unexpected token: operator (>) [./~/element-ui/src/mixins/emitter.js:

  • vue 使用微信jssdk,调用微信相册上传图片功能

    vue 使用微信jssdk 1.引入weixin-js-sdk npm install weixin-js-sdk 使用文档 https://www.npmjs.com/package/weixin-js-sdk 2.配置 vue中微信jssdk配置 import wx from 'weixin-js-sdk' created(){ //微信jssdk配置 let timestamp=new Date().getTime();//时间戳 let noncestr=Math.random().to

  • vue+elementUI实现简单日历功能

    vue+elementUI简单的实现日历功能,供大家参考,具体内容如下 <div class="calender2"> <div class="date-headers"> <div class="date-header"> <div><el-button type="primary" @click="handlePrev"><i class

  • vue+vant 上传图片需要注意的地方

    <van-uploader v-model="fileList" multiple :after-read="afterRead" :max-count="1" /> 1:上传文件流,提交的模式 肯定得 form-data模式 2:上传的文件file 做出处理我这里做的只能选择一张 afterRead(file){ console.log(file); //控制台可以看见图片信息 if(this.fileList.length >

  • vue+elementUI中表格高亮或字体颜色改变操作

    重点的代码: :row-style="setRowStyle"这个属性就是在table标签绑定的 :row-style="setRowStyle" // 这个方法直接加到methods里就好了,页面会自动调用的 setRowStyle(row) { if (row.row.isPart == true) { return 'color:blue;' } }, 具体代码: hmtl <el-table width="100%" :data=&

  • vue el-upload上传文件的示例代码

    话不多说 直接上代码 <el-upload :action="actionUrl" class="avatar-uploader" :multiple="false" name="files" ref="upload" :file-list="fileList" :on-preview="handlePreview" :on-success="hand

  • jdk1.8+vue elementui实现多级菜单功能

    前言:在学习谷粒商城的时候,在做分类维护树形菜单维护的功能中,项目中只讲了菜单三级树怎么实现,想拓展一下多级菜单,功能已实现,记录一下,有不对的地方欢迎指正. 一.后端部分 使用Jdk1.8的新特性Stream和lamada表达式,数据库的框架使用苞米豆的mybatis plus,话不多说,上代码 1. 新建ManyTree类,可封装成工具类 import com.atguigu.gulimall.product.entity.CategoryEntity; import com.google.

随机推荐

其他