elementUI上传文件应用前后端联调

最新推荐文章于 2024-08-14 17:41:39 发布
最新推荐文章于 2024-08-14 17:41:39 发布
阅读量673 收藏 4
点赞数
文章标签： elementui javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45944328/article/details/125914915
版权

elementUI上传文件应用前后端联调

<template>
    <!-- 上传文件弹窗 -->
    <div class="openDialog">
        <h1>打开Dialog</h1>
        <el-button type="primary" @click=";(openDialog = true), changeTitle('结束')" class="end">结束</el-button>
        <el-button type="primary" @click=";(openDialog = true), changeTitle('同意')" class="agree">同意</el-button>
        <el-button type="primary" @click=";(openDialog = true), changeTitle('驳回')" class="reject">驳回</el-button>
        <el-dialog :title="choiceTitle" :visible.sync="openDialog">
            <div class="opinions">
                <span>审批意见</span>
                <div>
                    <el-input type="textarea" v-model="textarea"></el-input>
                </div>
            </div>
            <div class="upload">
                <el-upload
                    class="uploadDemo"
                    ref="upload"
                    action="http://10.10.120.211:30999/form/center/file/upload"
                    :on-remove="handleRemove"
                    :before-upload="handleBefore"
                    :before-remove="beforeRemove"
                    :on-exceed="handleExceed"
                    :file-list="uploadFiles"
                    :limit="5"
                    :show-file-list="true"
                    :auto-upload="true"
                    multiple
                    ><el-button icon="zrx-icon iconicon_24_common_upload">上传文件</el-button>
                    <div slot="tip" class="el-upload__tip">支持扩展名：rar .zip .doc .docx...(最多可上传5个，每个不超过20M)</div>
                </el-upload>
            </div>
            <div class="foot">
                <el-button type="primary" @click=";(openDialog = false), uploadTheFile()" :disabled="this.uploadFiles.length == 0 ? true : false">确定</el-button>
                <el-button @click="openDialog = false">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            openDialog: false,
            textarea: '',
            choiceTitle: '',
            uploadFiles: [],
            agreeUploadFile: [],
            deletFileList: []
        }
    },
    methods: {
        // 上传前
        handleBefore(file) {
            this.uploadFiles.push(file)
            const uploadSize = Number(file.size / 1024 / 1024)
            if (uploadSize > 20) {
                alert('文件大小超过20M')
                return false
            }
            return false
        },
        // 移除前
        beforeRemove(file, filelist) {},
        // 移除时
        handleRemove(file, filelist) {
            console.log(file.percentage)

            this.deletFileList = filelist
            if (file.percentage === undefined) {
                for (const key in this.uploadFiles) {
                    if (file.name == this.uploadFiles[key].name) {
                        this.uploadFiles.splice(key, 1)
                    }
                }
            }
            console.log('uploadFiles:', this.uploadFiles)
        },
        handleExceed(files) {
            this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + this.uploadFiles.length} 个文件`)
        },

        changeTitle(val) {
            this.choiceTitle = val
        },

        async uploadTheFile() {
            const attachment = []
            const uploadAllFile = {}
            for (const key in this.uploadFiles) {
                this.uploadAllFile = this.uploadFiles[key]
                await this.$postMethod(this.$apikeyMap.todo.uploadFile, { payload: { file: this.uploadAllFile }, formData: true }, { baseURL: 'http://10.10.120.211:30999' }).then(
                    res => {
                        console.log(this.uploadFiles[key])

                        this.agreeUploadFile.push({ name: res.data.data.fileOriginalName, type: res.data.data.fileSuffix, url: res.data.data.link, description: '暂无' })
                    }
                )
            }
            this.attachment = {
                attachments: this.agreeUploadFile,
                comment: this.textarea
            }
            this.$putMethod(this.$apikeyMap.todo.agreeUpload, { payload: this.attachment }, { baseURL: 'http://10.10.120.211:30999' }).then(res => {})
        }
    }
}
</script>

<style lang="scss" scoped>
.openDialog ::v-deep {
    .el-button {
        border-radius: 2px;
        &.is-disabled {
            opacity: 0.3;
            color: #3b4155;
            background: #f4f5f8;
            border: 1px solid #dcdfe8;
        }
    }
    .end {
        background-color: $red;
        border-color: $red;
        &:hover {
            background-color: $red-hover;
            border-color: $red-hover;
        }
        &:focus {
            background-color: $red-active;
            border-color: $red-active;
        }
    }
    .agree {
        background-color: $blue;
        border-color: $blue;
        &:hover {
            background-color: $blue-hover;
            border-color: $blue-hover;
        }
        &:focus {
            background-color: $blue-active;
            border-color: $blue-active;
        }
    }
    .reject {
        background-color: $yellow;
        border-color: $yellow;
        &:hover {
            background-color: $yellow-hover;
            border-color: $yellow-hover;
        }
        &:focus {
            background-color: $yellow-active;
            border-color: $yellow-active;
        }
    }
    .el-dialog__wrapper {
        display: flex;
        justify-content: center;
        .el-dialog {
            position: fixed;
            width: 400px;
            height: 380px;
            border-radius: 2px;
            &::-webkit-scrollbar {
                width: 12px;
                height: 12px;
                background-color: $white;
            }
            &::-webkit-scrollbar-track {
                border-radius: 2px;
                background-color: transparent;
            }
            // 滚动条滑块
            &::-webkit-scrollbar-thumb {
                // height: 4px;
                border: 4px solid $white;
                border-radius: 10px;
                background-color: rgba(59, 65, 85, 0.2);
                cursor: pointer;
                &:hover {
                    border: 2px solid $white;
                }
                &:active {
                    background-color: rgba(171, 173, 181);
                }
            }
            // 头部区域
            .el-dialog__header {
                // overflow: hidden;
                border-bottom: 1px solid #e0e0e0;
                background-color: $white;
                width: 400px;
                height: 40px;
                padding: 10px 8px 10px 16px;
                position: fixed;
                z-index: 999;
                // 标题文字
                .el-dialog__title {
                    font-family: MicrosoftYaHei-Bold;
                    font-size: 14px;
                    color: #3b4155;
                    line-height: 20px;
                }
                // 头部关闭按钮
                .el-dialog__headerbtn {
                    top: 8px;
                    right: 8px;
                    width: 24px;
                    height: 24px;
                    background-image: url('../../assets/svg-icon/common_close.svg');
                    background-size: 100% 100%;
                    background-position: center center;
                    background-repeat: no-repeat;
                    &:hover {
                        cursor: pointer;
                    }
                    .el-dialog__close {
                        color: rgba(0, 0, 0, 0.7);
                        font-size: 12px;
                        &::before {
                            content: none;
                        }
                    }
                }
            }
            .el-dialog__body {
                padding: 0;
                margin-top: 40px;
                .opinions {
                    padding: 12px 0;
                    margin: 0 16px;
                    span {
                        margin-bottom: 4px;
                        display: inline-block;
                        opacity: 0.7;
                        font-family: MicrosoftYaHei;
                        font-size: 14px;
                        color: $black;
                        line-height: 24px;
                    }
                    .el-textarea {
                        .el-textarea__inner {
                            border-radius: 2px;
                            width: 368px;
                            height: 92px;
                            resize: none;
                            &:hover {
                                border: 1px solid $blue;
                                box-shadow: 0 0 4px 2px rgba(66, 99, 254, 0.1);
                            }
                            &:focus {
                                border: 1px solid $blue;
                                box-shadow: 0 0 4px 2px rgba(66, 99, 254, 0.1);
                            }
                            &::-webkit-scrollbar {
                                width: 12px;
                                height: 12px;
                                background-color: $white;
                            }
                            &::-webkit-scrollbar-track {
                                border-radius: 2px;
                                background-color: transparent;
                            }
                            // 滚动条滑块
                            &::-webkit-scrollbar-thumb {
                                // height: 4px;
                                border: 4px solid $white;
                                border-radius: 10px;
                                background-color: rgba(59, 65, 85, 0.2);
                                cursor: pointer;
                                &:hover {
                                    border: 2px solid $white;
                                }
                                &:active {
                                    background-color: rgba(171, 173, 181);
                                }
                            }
                        }
                    }
                }
                // 上传区域
                .upload {
                    // margin: 24px 0 0 0;
                    // 上传按钮
                    .el-button {
                        margin: 12px 16px 0 16px;
                        width: 96px;
                        padding: 0 8px 0 4px;
                        border: 1px solid #dadde6;
                        border-radius: 2px;
                        &:hover {
                            background: #f4f5f8;
                        }
                        &:active {
                            background: #e8eaf0;
                        }
                        i {
                            font-size: 24px;
                            margin-right: 4px;
                        }
                        span {
                            font-family: MicrosoftYaHei;
                            text-align: center;
                            font-size: 14px;
                            color: #3b4155;
                            line-height: 20px;
                            font-weight: 400;
                        }
                    }
                    // 列表区域包括按钮
                    .uploadDemo {
                        // 提示行文字
                        .el-upload__tip {
                            margin: 6px 0 0 16px;
                            opacity: 0.7;
                            font-family: MicrosoftYaHei;
                            font-size: 12px;
                            color: #3b4155;
                        }
                        // 列表ul区域
                        .el-upload-list {
                            overflow: auto;
                            height: 74px;
                            padding: 0 16px 0 12px; // 单行样式
                            .el-upload-list__item {
                                border-bottom: 1px solid#ebebeb;
                                margin-top: 4px;
                                &:hover {
                                    background-color: $white;
                                    .el-icon-close {
                                        opacity: 1;
                                    }
                                }
                                // 列表删除按钮容器
                                .el-upload-list__item-status-label {
                                    background-image: url('../../assets/svg-icon/common_close_sm.svg');
                                    background-size: 100% 100%;
                                    background-position: center center;
                                    background-repeat: no-repeat;
                                    .el-icon-upload-success {
                                        &::before {
                                            content: none;
                                        }
                                    }
                                }

                                &:first-child {
                                    margin-top: 12px;
                                }
                                // 列表行
                                .el-upload-list__item-name {
                                    display: flex;
                                    align-items: flex-end;
                                    height: 28px;
                                    box-sizing: content-box;
                                    padding: 0;
                                    opacity: 0.9;
                                    font-size: 12px;
                                    color: #3b4155;
                                    .el-icon-document {
                                        opacity: 0.9;
                                        color: #3b4155;
                                        line-height: 28px;
                                        text-align: center;
                                        background-image: url('../../assets/svg-icon/common_attach.svg');
                                        background-size: 100% 100%;
                                        background-position: center center;
                                        background-repeat: no-repeat;
                                        &::before {
                                            content: none;
                                        }
                                    }
                                }
                                // 列表关闭按钮外部容器
                                .el-upload-list__item-status-label {
                                    width: 24px;
                                    height: 24px;
                                    text-align: center;
                                    right: 0;
                                    top: 0;
                                    margin: 2px 0;
                                }
                                // 列表关闭按钮图片
                                .el-icon-close {
                                    width: 24px;
                                    height: 24px;
                                    line-height: 24px;
                                    text-align: center;
                                    font-size: 10px;
                                    top: 0;
                                    right: 0;
                                    margin: 2px 0;
                                    color: rgba(0, 0, 0, 0.7);
                                    background-image: url('../../assets/svg-icon/common_close_sm.svg');
                                    background-size: 100% 100%;
                                    background-position: center center;
                                    background-repeat: no-repeat;
                                    &::before {
                                        content: none;
                                    }
                                }
                                // 列表icon容器
                                .el-upload-list__item-name [class^='el-icon'] {
                                    width: 24px;
                                    height: 24px;
                                    margin: 2px;
                                }
                            }
                        }
                    }
                }
                .foot {
                    width: 400px;
                    height: 56px;
                    background: $--pro-background;
                    display: flex;
                    justify-content: flex-end;
                    .el-button {
                        font-size: 14px;
                        text-align: center;
                        line-height: 20px;
                        border-radius: 2px;
                        margin: 12px 4px;
                        font-weight: 400;
                        &.is-disabled {
                            opacity: 0.3;
                            color: #3b4155;
                            background: #f4f5f8;
                            border: 1px solid #dcdfe8;
                        }
                    }
                    .el-button--primary {
                        color: $white;
                        background-color: $blue;
                        border-color: $blue;
                        &:hover {
                            background-color: $blue-hover;
                            border-color: $blue-hover;
                        }
                        &:focus {
                            background-color: $blue-active;
                            border-color: $blue-active;
                        }
                    }
                    .el-button--default {
                        background: #ffffff;
                        border: 1px solid #dcdfe8;
                        &:hover {
                            background: #f4f5f8;
                        }
                        &:focus {
                            background: #e8eaf0;
                        }
                    }
                }
            }
        }
    }
}
</style>
qq_45944328
关注
通过element把图片上传到后台
jinann0的博客
12-07 2585
搭建vue后台管理系统的时候碰到的上传图片到后台接口
Vue + SpringCloud前后端分离项目3个月项目实战经验分享(下)
不安分的猿人的专栏
07-23 4120
1.前言 上篇文章总结了三个月的后端开发。本篇主要对3个个月前端开发做个总结。最开始我想着我主要负责好后端的开发。没后端接口开发完成与前台的同事调接口。由于前端严重缺人，后端接口开发完成，没有可以和我调试接口的前端工作人员，于是我就想着不如自己来调前端页面吧！ Vue作为时下最流行的前端框架之一，我也想学习一下，于是开始一个人前后台的联调。（自己玩特别嗨哟！） 2.技术栈 ...
elementUI自定义上传文件 前端后端超详细过程
一步一个脚印，踏实努力，向着目标前进
08-22 8258
引入Element UI组件库：在前端项目中引入Element UI库，可以通过CDN引入或者通过npm安装并导入。创建上传组件：在前端代码中创建一个上传组件，可以使用el-upload组件来实现文件上传功能。在组件中设置上传的URL、校验函数和上传成功的回调函数等。校验文件：在属性指定的校验函数中，根据文件的类型和大小进行校验。可以使用file.type获取文件类型，使用file.size获取文件大小。校验失败时，通过方法显示错误信息。发送文件：在上传组件中，通过action。
vue+element-ui上传文件
最新发布
2201_75763401的博客
08-14 162
【代码】vue+element-ui上传zip文件。
Vue elementUI上传文件到OSS服务器，后端（java）(配图文)
ILIKETANGBOHU的博客
02-15 2099
进入对象存储OSS，创建一个Bucket(记录下Endpoint,后端配置连接OSS时会使用到)并保存起来，否则退出后无法再获取到这些信息。只能重新创建新的子用户。接下来是java的后端的配置以及与OSS服务器的连接了。在新创建的Bucket中测试上传文件是否可用。首先去阿里云官网，开通并配置OSS服务。创建完成后，为该子用户添加权限。添加service的实现类。到这里后端测试完毕。前端采用vue实现
elementUI实现上传excel文件并传给后端
weixin_54446335的博客
06-18 1061
格式校验：上传前检查文件格式、数据大小等信息，判断是否能够上传。这里可导入xlsx和xls文件格式。我们选择一个按钮来实现上传，点击上传按钮，可从本地选择文件上传，确定后传递给后端。
elementUI加springboot实现上传excel文件给后端并读取excel
xc9711的博客
08-02 5098
最近在研究如何通过vue的elemenetui框架加上springboot去实现从前端上传文件给后端，在进行文件查找的时候，大部分我进行查找的都是怎么上传文件给服务器，所以也为了记录，就计划写下本文章； 同时，本次实现上传excel并对excel的内容进行读取......
前后端分离开发、Yapi、Swagger、项目部署
乌云的博客
04-20 995
前后端分离开发，就是在项目开发过程中，对于前端代码的开发由专门的前端开发人员负责，后端代码则由后端开发人员负责，这样可以做到分工明确、各司其职，提高开发效率，前后端代码并行开发，可以加快项目开发进度。
Vue用户管理系统：增删改查与文档导入导出功能
- 通过本项目实践理解前后端的联调过程，解决接口不匹配、数据格式等问题。 4. **安全性考虑** - 在实际应用中，需注意用户数据的安全性和系统的稳定性。 - 实现用户身份验证和权限控制，确保只有授权的用户才能...
谷粒商城基础篇
apple_52138126的博客
03-06 2772
大哥的笔记
Web常见问题
MQSPS的博客
08-06 174
物理外键（Physical Foreign Key）：物理外键是通过在数据库表中使用外键约束来实现的。在物理外键中，外键关系是通过数据库引 擎来维护和执行的。当在一个表中定义了外键，它会引用另一个表的主键，从而建立表与表之间的关联关系。物理外键通过数据库的完整性 约束来确保数据的一致性，例如在删除或更新主表的记录时，会相应地删除或更新相关的外键记录。逻辑外键（Logical Foreign Key）：逻辑外键是指在数据模型中定义的外键关系，但在数据库表中并没有实际的外键约束。
vue+elementui：前端文件上传与后端文件上传（傻瓜式教学）
qq_45791799的博客
09-06 1万+
qqq
element ui+vue+springboot 批量上传文件 前端加后端代码
cv1002420186的博客
10-19 1003
【代码】element ui+vue+springboot 批量上传文件 前端加后端代码。
Vue+elementUI中的el-upload实现上传文件给后端，限制上传文件的格式、文件的大小、文件的数量，将表单和Excel文件一起提交给后端
qq_46103732的博客
03-14 7428
Vue+elementUI中的el-upload实现上传文件给后端 需求：1.表单输入信息 2.上传Excel附件 3.下载附件模板 4.将表单和Excel文件一起提交给后端 限制上传文件的格式、文件的大小、文件的数量
vue+elementui：前端文件上传与后端文
w199809w的博客
08-12 1015
前端的导入需要在前端读取文件，将文件转换成二进制字符串，这样上传成功后显示在前端的表格里，点击保存，调用接口，保存在数据库！auto-upload:是否在选取文件后立即进行上传。show-file-list:是否显示已上传文件列表。on-remove:从文件列表移除触发的钩子函数。on-change:监听文件状态改变。accept:前端限制文件类型。...
elementUI自定义上传文件（前端后端超详细过程）
热门推荐
ILIKETANGBOHU的博客
10-15 3万+
注意：前台传送的是FormData数据，要拿到文件要使用@RequestParam(前端存放到formData的key)charset=utf-8”,提醒后台数据是FormData类型。这里要使用到FormData()对文件进行存储才能提交到后台。注意：使用FormData提交文件只能使用post请求。上传文件并与其他参数一同提交到后台(2.2 data中的属性。
闪聚支付项目-项目总结
9.冄2.7.號的博客
08-07 5112
闪聚支付是个什么样的项目？ 项目背景 随着移动支付的盛行，商业银行、第三方支付公司、其它清算机构、消费金融公司等众多类型的机构，都在为商户提供网络（移动）支付解决方案。另一方面，用户的支付需求繁多，支付渠道已呈“碎片化”状态，并且“碎片化”程度将逐渐加深。聚合支付顾名思义就是将目前主流的支付进行整合，形成第三方支付的聚合通道，也被称为“第四方支付”。 下图是聚合支付的产业结构： 聚合支付不进行资金清算，因此无需支付牌照，其只是完成支付环节的信息流转和商户运营的承载，其在集合银联、支付宝、微信等主流支付方式
ElementUI组件之头像上传, 并储存在后端服务器
Leonnnn2020的博客
05-07 1840
ElementUI头像上传功能实现
Vue使用Element UI 的upload做Excel文件上传，后端拿到Excel做数据导入
JavaXCH的博客
08-02 6693
首先呢，我的需求是用Excel表做数据导入，前端传入文件，后端拿到文件解析，然后插入数据库，由于对vue不熟悉，踩了很多的坑，最后还是做完了，这里分享一下我踩过的坑。 直接贴代码吧： <!--文件导入--> <template> <div> <el-upload class="filter-item" name="file" action="string"
使用element-ui中的Upload 上传功能将图片上传到后端接口
星星月亮的博客
09-15 1万+
1.首先就先安装element-ui npm i element-ui -S 2.然后引入，可以全局引入，也可以局部引入 全局引入： import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); 3.在页面引入要使用的Upload模块 <el-upload class="upload-demo" action="https://xxxxxxxx
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值