vue2+antdesign的项目 上传文件遇到问题？

Question

{{define "models"}}
<style>
    .ant-modal-body {
        padding: 10px 20px;
    }

    .ant-form-item {
        margin: 0 0 15px;
    }
</style>
<a-modal id="models" v-model="inModal.visible" :title="inModal.title" :confirm-loading="inModal.confirmLoading"
    :closable="true" :mask-closable="false">
    <template slot="footer">
        <a-button key="back" @click="inModal.close">
            取消
        </a-button>
        <a-button :loading="inModal.uploading" key="submit" type="primary" @click="inModal.ok">
            [[inModal.okText]]
        </a-button>
    </template>
    <a-form id="upload" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
        <a-form-item label='类型'>
            <a-radio-group v-model="inModal.rules.type" button-style="solid" @change="radioChange">
                <a-radio-button value="black">
                    黑名单
                </a-radio-button>
                <a-radio-button value="white">
                    白名单
                </a-radio-button>
            </a-radio-group>
        </a-form-item>
        <a-form-item label='上传文件'>
            <a-upload :file-list="inModal.rules.fileList" :remove="handleRemove" :before-upload="beforeUpload">
                <a-button>上传</a-button>
            </a-upload>
        </a-form-item>
    </a-form>
</a-modal>
<script>
    const inModal = {
        title: '',
        visible: false,
        confirmLoading: false,
        uploading: false,
        okText: '确定',
        confirm: null,
        rules: new Rule(),
        ok() {
            ObjectUtil.execute(inModal.confirm, inModal.rules);
        },
        show({ title = '', okText = '确定', rules = null, confirm = (rules) => { } }) {
            this.title = title;
            this.okText = okText;
            this.confirm = confirm;
            this.visible = true;
        },
        close() {
            inModal.visible = false;
            inModal.loading(false);
        },
        loading(loading) {
            inModal.confirmLoading = loading;
        },
    };

    new Vue({
        delimiters: ['[[', ']]'],
        el: '#models',
        data: {
            inModal: inModal,
            SSMethods: SSMethods,
            get getRules() {
                return inModal.rules;
            },
        },
        methods: {
            radioChange(value) {
                console.log(value)
                this.inModal.rules.type = value
            },
            handleRemove(file) {
                const index = this.inModal.rules.fileList.indexOf(file);
                const newFileList = this.inModal.rules.fileList.slice();
                newFileList.splice(index, 1);
                this.inModal.rules.fileList = newFileList;
            },
            beforeUpload(file) {
                this.inModal.rules.fileList = [...this.inModal.rules.fileList, file];
                return false;
            }
        }
    });

</script>
{{end}}

这是封装的imodel对话框

在另外一个页面引用

methods： {
// 上传
        async upload () {
          console.log('444')
          inModal.show({
              title: '上传黑白名单',
              okText: '上传',
              confirm: async (rules) => {
                inModal.loading();
                await this.rulesUpload(rules);
                inModal.close();
              }
          });
        },
        async rulesUpload (rules) {
          const formData = new FormData();
          formData.append('file', rules.fileList[0])
          formData.append('type', rules.type);
          await this.submit('/rules/upload', formData, inModal);
        },
        async submit(url, data, modal) {
            const msg = await HttpUtil.postWithModal(url, data, modal);
            console.log(msg)
        },
}

怎么解决啊，麻烦各位大佬

Answer 1

应该是 content-type 没有设置为 multipart/form-data

参考图一、图二 响应标头 ，题主为 application/json，肯定是传不了二进制文件的，json 只能传递文本

至于如何配置响应头，要看题主代码中的 HttpUtil.postWithModal 是怎么封装的了

Answer 2

没有看到config的信息, 后端用MultipartFile 接受,
前端需要设置config,再提交