Vue上传文件到springboot

2023-11-19

            <el-upload
                    class="upload-demo"
                    ref="upload"
                    accept="image/png,image/jpg,image/jpeg"
                    :file-list="fileLists"
                    :on-preview="handlePreview"
                    :on-change="handleChange"
                    :on-remove="handleRemove"
                    :auto-upload="false"
                    list-type="picture">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
            </el-upload>
            <br>
            <el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button>

在data中定义

        data: {
            fileLists: [],

使用on-change属性,将每次添加的文件依次推入到fileLists中,然后将fileLists的文件使用formData封装,请求头为'multipart/form-data'

            handleChange(file) {
                this.fileLists.push(file)
            },
            submitUpload() {
                const formData = new FormData()
                // 因为要传一个文件数组过去,所以要循环append
                this.fileLists.forEach((file) => {
                    formData.append('files', file.raw)
                })
                this.uploadRequest(formData)
            },
            uploadRequest(formData) {
                let that = this;
                axios.post("http://localhost:8080/new/upload", formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                })
                    .then(function (res) {
                        console.log(res)
                        if (res.data.result == "ok") {
                            that.$message.success('上传成功!');
                        }
                    })
                    .catch(function (err) {
                        that.$message.error('网络请求异常!');
                    })
            },

后端代码:

    @PostMapping("/new/upload")
    public BaseResultModel uploadPic(@RequestParam("files") MultipartFile[] files) {
	// 逻辑
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue上传文件到springboot 的相关文章

随机推荐

  • JVM第一讲 JVM双亲委派机制以及打破双亲委派

    类加载器和双亲委派机制 Java里有如下几种类加载器 引导类加载器 负责加载支撑JVM运行的位于JRE的lib目录下的核心类库 比如rt jar charsets jar等 扩展类加载器 负责加载支撑JVM运行的位于JRE的lib目录下的e
  • 对话数据宝董事长汤寒林:数据要素崛起的背后是产业链的爆发

    数字经济再添新概念 数据要素的来到会对行业产生什么影响 数科星球原创 作者丨苑晶 编辑丨十里香 从小众的极客文化再到被众多企业所接纳 信息科技已经历70余年 现在 随着越来越多的企业开始拥抱数据产业之时 数据的有效利用成为企业间备受关注的话
  • 无网络离线环境下搭建Python所需环境

    整理所需要的依赖环境requirment txt 例如 Django 3 2 django apscheduler 0 3 0 django cors headers 3 4 0 django mssql 1 8 django mssql
  • 【Docker仓库】Docker私有仓库Registry开启用户认证

    Docker仓库 Docker私有仓库Registry开启用户认证 一 Docker Registry 介绍 二 本次实践介绍 1 本次实践简介 2 本次环境规划 三 部署docke registry镜像仓库 1 创建registry容器
  • webpack项目中怎么使用swiper轮播图插件的解决方案

    问题 由于webpack项目中需要使用到swiper轮播图插件 直接let swiper require swiper 使用是不行的 解决方案 采用ES6的方式来引入 例如 数据传输过程中数据不时出现丢失的情况 偶尔会丢失一部分数据 APP
  • 蓝桥 最小距离

    问题描述 数轴上有n个数字 求最近的两个数 即min abs x y 输入格式 第一行包含一个整数n 接下来一行 表示n整数 输出格式 一个整数表示最小距离 样例输入 6 7 3 4 11 9 17 样例输出 1 样例说明 取3和4 数据规
  • 耳机使用说明书 jbl ua_JBL的蓝牙耳机怎么样?2020年JBL耳机全系列购买指南(10月)...

    JBL的蓝牙耳机怎么样 2020年JBL耳机全系列购买指南 说实话JBL当年也是风靡全球的高端耳机品牌 从1920年JBL就开始做音频技术 在几十年的研发和发展中 JBL有做的好的 比如他家的音箱品质在全球目前依旧是具有不可替代的地位 当然
  • PAT 乙级 1037 在霍格沃茨找零钱 (C语言)

    题目 如果你是哈利 波特迷 你会知道魔法世界有它自己的货币系统 就如海格告诉哈利的 十七个银西可 Sickle 兑一个加隆 Galleon 二十九个纳特 Knut 兑一个西可 很容易 现在 给定哈利应付的价钱 P 和他实付的钱 A 你的任务
  • vector模拟实现

    个人简介 作者简介 大家好 我是菀枯 支持我 点赞 收藏 留言 格言 不要在低谷沉沦自己 不要在高峰上放弃努力 1 前言 大家在学习C 的时候一定会学到STL 标准模板库 这是C 标准库中最重要的组成部分 它包含了常用的数据结构和算法 今天
  • API架构的选择,RESTful、GraphQL还是gRPC

    文章目录 一 RESTful 1 什么是RESTful 2 RESTful架构的原则 3 RESTful的适用场景 4 RESTful的优点 5 RESTful的缺点 二 GraphQL 1 什么是GraphQL 2 GraphQL的原则
  • 代码检视拟定方案(已完成,非代码博文,开发流程相关)

    代码检视拟定方案 为什么要进行代码检视 提前发现代码逻辑问题 优秀的代码分享 坏味道代码警示 要求别人的同时提高对自己的要求 性能初步检查 抽象组件 函数沉淀 常量抽取 设计模式引入 解决代码审查消耗大量时间精力问题 结对编程 利于双方代码
  • 【Python123】答案集合3

    目录 猴子吃桃 自定义数学函数 素数问题 素数求和 奇偶求和 华氏度转摄氏度速查表 判断字符串结尾 统计单词的数量 各位数字之和为5的数 字符串长度 字符串加密 输出单词 大小写转换 查找指定字符 模拟洗牌 随机密码生成器 模拟生成微软序列
  • 第七章InnoDB数据存储结构

    第七章InnoDB数据存储结构 1 数据的存储结构 页 索引结构为我们提供了高效的索引方式 不过索引信息和数据记录都是保存在文件上的 确切的来说是存储在页结构中 另一方面 索引是在存储引擎中实现的 Mysql服务器上的存储引擎负责对表中数据
  • PostgreSQL清空表并保留表结构、清空数据库还原数据库为新建时的状态的方法

    清空表并保留表结构 一般情况下 我们使用delete删除表中数据 但是delete是一条数据一条数据来删除表中的数据 直至表清空 保留表结构 但是当数据量很大时 它耗时较久 其实 删除表数据但保留表结构使用truncate更快速安全 使用方
  • ubuntu18.04配置cuda(RTX3080Ti)

    10系的显卡换成30系显卡后 之前配好的深度学习环境出现了兼容问题 索性重装系统 从零开始配环境 过程中也出现了各种对新显卡不兼容的情况 以下的配置是本人摸索最终成功的版本 特此记录一下 首先就是安装ubuntu18 04 这个不是本文的重
  • 常见改机软件及其原理

    1 改机原理分析 1 1 IOS设备改机原理 在iOS上目前所有流行的改机工具 本质上是利用substrate框架对某些用来获取设备和系统参数函数进行hook 从而欺骗App达到修改的目的 具体如下 用作获取设备参数的函数 无论是C函数 还
  • 蓝桥杯-2020年省赛-回文日期

    498 import datetime n input start datetime date int n 4 int n 4 6 int n 6 delta datetime timedelta days 1 flag 0 for i i
  • Ubuntu的快乐学习2——SnowBoy语音唤醒

    Ubuntu的快乐学习2 SnowBoy语音唤醒 学习前言 安装步骤 一 麦克风检测部分 1 安装pulseaudio和sox 2 安装其它软件依赖 二 获取源代码 学习前言 为了部落 安装步骤 一 麦克风检测部分 1 安装pulseaud
  • ubuntu20编译运行orb-slam3踩坑

    orb3 编译网上教程很多 写一下自己安装编译过程中踩的坑 一个半星期 终于可以跑demo了 1 出现如下问题 或者在Build target g2o时 卡住 make 2 CMakeFiles ORB SLAM3 dir build ma
  • Vue上传文件到springboot