vue axios实现文件上传后台springboot

最新推荐文章于 2024-07-29 20:43:09 发布

冥冥之外

最新推荐文章于 2024-07-29 20:43:09 发布

阅读量2k

点赞数 1

分类专栏： springboot java

本文链接：https://blog.csdn.net/qq_39493105/article/details/90484348

版权

本文介绍了使用Vue和Axios实现文件上传功能，遇到的问题及解决方案。在后台SpringBoot中，初始尝试通过注解接收文件失败，原因是类型不匹配。解决方法是在`application.yml`配置multipart启用，并将@RequestParam参数类型改为MultipartFile。

摘要由CSDN通过智能技术生成

引入jar

        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3.3</version>
        </dependency>

html代码

<div id="uploadDiv">
    <input type="file" value="" id="file" @change="uploadConfig" name="file">
</div>

<script type="text/javascript">
    new Vue({
        el: '#uploadDiv',
        methods: {
            uploadConfig: function (e) {
                    var formData = new FormData();
                    formData.append('file', e.target.files[0]);
                    var  url = 'fileUpload';
                    var config = 'multipart/form-data;';
                    // axios(