关于MultipartFile类上传文件遇到的问题

javasfool

已于 2024-04-18 19:00:55 修改

阅读量578

点赞数 11

文章标签： java html javascript

于 2024-04-18 18:56:06 首次发布

本文链接：https://blog.csdn.net/javasfool/article/details/137932763

版权

关于MultipartFile类上传文件遇到的问题

在开发时，后端使用了MultipartFile类进行接收文件，使用PostMan测试接口不报错，能够正常上传，
但是前端同事在测试时使用接口却报错。
先说结论，在后端使用MultipartFile类时前端的Headers中Content-Type需为multipart/form-data格式，
而设置方法，起初是直接采用’Content-Type’ : 'multipart/form-data’设置的，发现还是不行，后来查找
方法，发现采用formData.append(‘file’, document.querySelector(‘input[type=file]’).files[0]);的方式能够
解决。
下面附上源码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
            href="https://lib.baomitu.com/element-ui/2.15.13/theme-chalk/index.min.css"
            rel="stylesheet"
    />

</head>

<body>
<div id="app">
    <div class="signatory">
        <el-upload
                action=""
                accept=" .xlsx, .pdf, .txt, .doc, .docx, .xls, .rar, .zip, .png , .jpg, .jepg"
                :on-success="handleUploadSuccess"
                :on-change="handleUploadChange"
        >
            <el-button type="primary">上传文件</el-button>
        </el-upload>
    </div>
</div>

<script src="https://lib.baomitu.com/vue/2.6.14/vue.min.js"></script>
<script src="https://lib.baomitu.com/element-ui/2.15.13/index.min.js"></script>
<script src="https://lib.baomitu.com/axios/0.27.2/axios.js"></script>

<script>
    new Vue({
        el: "#app",
        data: {
            uploadAction:"url"
        },
        mounted() {

        },
        methods: {
            handleUploadChange(file) {
                const formData = new FormData();
                //关键行--该数据类型默认参数Content-Type:multipart/form-data
                formData.append('file', document.querySelector('input[type=file]').files[0]);
                // 发送请求上传文件
                axios.post(this.uploadAction, formData)
                    .then(response => {
                        console.log(document.querySelector('input[type=file]').files[0]);
                    })
                    .catch(error => {
                        console.error(error);
                    });
            },
            handleUploadSuccess(response) {
                // 处理上传成功的逻辑
                console.log(response);
            }
        },
    })
</script>
</body>
</html>