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

最新推荐文章于 2024-03-29 15:22:05 发布
最新推荐文章于 2024-03-29 15:22:05 发布
阅读量594 收藏 3
点赞数
文章标签： 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
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用 Element UI 将图片上传到后端的 Vue.js 示例：
m0_47847289的博客
06-11 1129
请注意，上面的代码仅供参考，你需要根据自己的具体情况来修改和扩展这个示例。例如，你需要将上传的图片数据传给后端，或者你需要为上传的图片添加一些其他的元数据等。方法，在文件上传成功时被调用，清空已上传的文件并打印上传结果。在上面的代码中，我们使用 Element UI 的。部分中引入 Element UI 的上传组件和。组件，该组件实现了将文件上传到服务器的功能。库，并定义了组件名字、数据和方法。，用于保存已上传的文件列表。指定了文件上传的URL地址，则用于显示已上传的文件列表。在组件方法中，我们定义了。
elementUI加springboot实现上传excel文件给后端并读取excel
xc9711的博客
08-02 4791
最近在研究如何通过vue的elemenetui框架加上springboot去实现从前端上传文件给后端，在进行文件查找的时候，大部分我进行查找的都是怎么上传文件给服务器，所以也为了记录，就计划写下本文章； 同时，本次实现上传excel并对excel的内容进行读取......
element-ui文件上传
最新发布
dy1717的博客
03-29 139
上传文件
VUE|ElementUI el-upload实现文件上传|服务器交互
craftsman2020的博客
02-07 2175
VUE|ElementUI el-upload实现文件上传|服务器交互
【VUE+FLASK学习】Vue使用element-ui上传文件至服务器端
yuelizhe4774的博客
06-27 1488
使用vue上传数据至服务器端
element-ui实现图片上传功能（后台部分）
m0_51963973的博客
07-25 5756
DEFAULT_ALLOWED_EXTENSION默认允许上传文件的扩展名，起到校验的功能。
Vue项目前后端联调(使用proxyTable实现跨域方式)
10-15
在开发Vue项目时，前后端联调是一个必不可少的环节，尤其是在进行API接口的测试和调试时。由于浏览器的同源策略限制，本地开发环境与线上服务器之间可能存在跨域问题。为了解决这个问题，Vue提供了一种便捷的方式，...
使用springboot 前后端联调的一个前端代码
08-21
使用springboot 前后端联调的一个前端代码
前端及前后端联调工作流程.pptx
02-21
前端及前后端联调工作流程.pptx
2024SpringBootWeb案例1 分页 前后端联调 接口开发
03-28
2024SpringBootWeb案例1 分页 前后端联调 接口开发 本资源摘要信息将从四个方面对2024SpringBootWeb案例1进行解释和分析：标题、描述、标签和部分内容。 标题：2024SpringBootWeb案例1 分页 前后端联调 接口开发 ...
element upload手动上传并灵活删除文件列表项
weixin_44738844的博客
07-11 5760
点击提交才能上传文件列表，文件列表右侧关闭按钮删除单个文件项目。使用remove和change控制文件列表的增加和删除。手动上传，要关闭自动上传的功能。
Element UI | Upload 使用submit方法手动上传文件
Igiveufireworks的博客
05-08 4729
判断文件没有上传即先进行文件上传，上传文件成功后在调用表单上传接口，否则直接调用接口上传表单。submit为element ui内部方法。表单上传接口一般传递文件id。点击上传文件按钮不立刻进行上传，而是点击提交后再调用上传接口，和表单一起提交。
element ui （简单的手动上传文件，submit方式）
会点php的前端小渣渣
05-22 9414
<template> <el-form ref="form" label-position="left" :model="form" :rules="rules" label-width="80px" style="margin:20px;width:60%;min-width:600px;"> <el-form-item label="坐标类型" prop="coordinateType"> <el-radio-.
Element-ui upload 手动上传文件
weixin_45333397的博客
01-31 2094
前端vue使用element-ui做手动上传文件，初级代码，复制急用
使用elementui实现表单上传功能_使用ElementUI中的upload组件上传Excel文件
weixin_30864831的博客
01-12 1749
最初使用该组件实现图片上传是没有问题的，前后端配合，最终实现想要的效果，组件使用过代码如下:将文件拖到此处，或点击上传现在改为使用该组件实现Excel文件上传，组件的使用几乎是不变的，代码如下：将文件拖到此处，或点击上传一次只能上传一个文件，仅限text格式，单文件不超过1MB触发的方法如下代码：// 上传文件之前的钩子beforeUpload (file) {console.log('befor...
element el-upload组件不立即上传 （自定义上传）
w_w1314520的博客
03-04 5758
element 不立即上传 （自定义上传） <el-form-item label="选择文件："> <el-upload class="upload-demo" action="#" :on-change="onChange" :show-file-list="false" multiple :auto-upload='false'> <div class="up-btn">
vue使用element-ui的el-upload上传图片至服务器，服务端使用的是node.js对接受的图片进行处理
热门推荐
qq_49042268的博客
01-27 1万+
使用vue的element-ui中的el-upload上传图片至node服务端，服务端接受图片并返回图片链接至前端。
ElementUI文件上传 实现点击【选择文件】按钮切换文件
InterestAndFun的博客
12-01 3413
问题描述 在文件上传的时候，我们往往会有这样的需求：一次只能上传一个文件。 用过ElementUI的 el-upload 的你一定会说，这个好办啊，加个limit 属性就可以解决了。 但是有可能会出现这种情况：我想上传 【1.txt】这个文件，然后手快点了【2.txt】这个文件。 选错文件了而已嘛，那就切换啊。这时候，你会发现，无论怎么点击，你都选不上【1.txt】这个文件。 因为ElementUI认为，你这人不行啊，都限制你只能上传一个了，你还在选多文件，我就不让你选上！ 问题解决 由于设置了limit会
el-upload 不要立即上传
rita13的博客
11-17 2459
1、将自动上传关闭：auto-upload="false"，before-upload只能在auto-upload="true"时使用，所以上传前的数据校验由on-change来实现。 2、在需要上传时submit() 3、 由于on-change在数据上传、上传成功、上传失败时都会被调用，所以要再submit的函数里加一条if (file.status !== 'ready') return; ...
汉得信息Hzero框架前后端联调
06-10
非常高兴为您解答问题。针对汉得信息Hzero框架前后端联调的问题，我建议您可以参考以下步骤： 1. 确认前后端接口文档的一致性：在进行前后端联调之前，需要确保前后端的接口文档是一致的，这样才能保证前后端数据的传输正确无误。 2. 配置前后端的开发环境：前后端联调需要前后端开发环境的配合，确保前后端代码能够正常运行。同时需要注意，前后端开发环境的配置需要一致，这样才能避免出现环境不一致导致的问题。 3. 进行接口测试：在进行前后端联调之前，需要先进行接口测试，确保前后端接口的正确性和可靠性。测试时可以使用 Postman 等工具进行接口测试。 4. 调试前后端代码：如果在前后端联调过程中出现问题，需要针对问题进行调试。可以通过打印日志、断点调试等方式进行调试。 5. 注意数据格式的一致性：在前后端联调时，需要确保前后端传输的数据格式是一致的，这样才能保证数据能够正常传输和解析。 希望以上建议能够帮助您进行汉得信息Hzero框架前后端联调。如果您有其他问题，可以随时向我提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值