Vue上传文件到springboot

Vue上传文件到springboot<el-uploadclass=”upload-demo”ref=”upload”accept=”image/png,image/jpg,image/jpeg”:file-list=”fileLists”:on-preview=”handlePreview”…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

            <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) { 
   
	// 逻辑
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/181289.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • web页面请求的整个过程_HTTP的请求方法

    web页面请求的整个过程_HTTP的请求方法HTTP请求的完全过程1.1浏览器根据域名解析IP地址浏览器根据访问的域名找到其IP地址。DNS查找过程如下:浏览器缓存:首先搜索浏览器自身的DNS缓存(缓存的时间比较短,大概只有1分钟,且只能容纳1000条缓存),看自身的缓存中是否是有域名对应的条目,而且没有过期,如果有且没有过期则解析到此结束。 系统缓存:如果浏览器自身的缓存里面没有找到对应的条目,那么浏览器会…

  • 树莓派开发笔记(十):Qt读取ADC模拟量电压(ADS1115读取电压模拟量)

    树莓派开发笔记(十):Qt读取ADC模拟量电压(ADS1115读取电压模拟量)若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936本文章博客地址:https://blog.csdn.net/qq21497936/article/details/102524577目录前话Demo运行效果Demo:电压模拟量采集ADS1115实物特点引脚图与访问地址多个ADS1115连接(单级…

    2022年10月25日
  • Jquery 插件库

    Jquery 插件库

  • 产品经理面试题整理

    产品经理面试题整理凡事“预则立,不预则费”。即使你有丰富的产品经验,在面试那种紧张的环境下要面试好也不是一件易事,因为在那种环境下,你要对面试官提出的问题快速反映,快速组织语言,而你又没有经常训练这种能力,想回答好还是很不容易的,如果你经常背一些产品经理的面试题,那你回答的时候就流畅多了,下面将一些常见的产品经理面试题整理下来,需要的小伙伴拿去。下面我们先看看都有什么问题吧以下是上面的问题的具体解析,可能不全面,欢迎大家补充1、介绍一下你自己介绍一下自己的姓名,年龄、毕业院校,工作…

  • JAVA设计模式之门面模式(外观模式)[通俗易懂]

    医院的例子  现代的软件系统都是比较复杂的,设计师处理复杂系统的一个常见方法便是将其“分而治之”,把一个系统划分为几个较小的子系统。如果把医院作为一个子系统,按照部门职能,这个系统可以划分为挂号、门诊、划价、化验、收费、取药等。看病的病人要与这些部门打交道,就如同一个子系统的客户端与一个子系统的各个类打交道一样,不是一件容易的事情。  首先病人必须先挂号,然后门诊。如果医生要求化验,病人必

  • Qt 编译方式之 qmake[通俗易懂]

    Qt 编译方式之 qmake[通俗易懂]作者:billy版权声明:著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处QMake简介Qt的帮助文档中对于qmake是这样介绍的:qmake工具有助于简化不同平台上开发项目的构建过程。它自动生成生成makefile,因此创建每个makefile只需要几行信息。您可以将qmake用于任何软件项目,无论它是否使用qt编写。qmake是Qt工具包中带的一个非常…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号