Question

如果具有带有文本字段和文件上传选项的表单。该文件称为start.vue（say）。由此，将调用module.js（say）文件。使用该service.js（say）被调用。该service.js调用moveController.java中的api（例如）。我收到以下错误消息：当前请求不是多部分请求

试图找到语法，以便在调用api之前保留多部分标头。 module.js正在获取适当的文件值。但是不知道关于service.js

start.vue是：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
export default {
    name: "BatchMove",
    computed: {
        loading() {
            return this.$store.state.loader.loading;
        },
        msgs() {
            return this.$store.state.moveBatchHistory.msg;
        }
    }, 
    components: {},
    data() {
        return {
            file: '',
            emailId: ''
        };
    },      
    methods: {
        submitFile() {
            console.log("logging email... " + this.emailId);
            const { emailId, file } = this;
            this.$store.dispatch("moveBatchHistory/ans", { file, emailId });
        },
        handleFileUpload(){
            this.file = this.$refs.file.files[0];
        }
    }           
}   
</script>

module.js是：

import {
    moveBatchHistoryService
} from '../_services';

export const moveBatchHistory = {
    namespaced: true,
    state: {        
                msg: null
    },
    actions: {
        ans({commit}, {file, emailId}) {
            moveBatchHistoryService.getSomething(file, emailId).then(
                response => { commit("ans", response); }
            );
        }
    },
    mutations: {
        ans(state, response) {
                state.msg = response
        }
    }
}

service.js是：

import config from '../config';
import {authHeader} from '../_helpers';
import axios from 'axios';
import {store} from '../_store';

export const moveBatchHistoryService = {
    getSomething
};

function getSomething(file, emailId) {
    var headers = authHeader();

    const requestOptions = {
        method: 'POST',
       headers: headers,
        params: {
            "file": file,
            "Email": emailId    
        }
    };
    return axios(`${config.apiUrl}/api/moveBatch`, requestOptions)
        .then(response => {
            store.dispatch("alert/errorTime", "We are here!");
            return response.data;
        }).catch(() => {
            store.dispatch("alert/errorTime", "Unable to process your request this time. Please try again latter.");
        });
}
'''

moveController.java是：

@RequestMapping(value = "/moveBatch", method = RequestMethod.POST)
    public void singleFileUpload(@RequestParam("file") MultipartFile file, String Email) throws Exception {}

当前请求不是moveController.java中的多部分请求

Answer 1

我不太擅长vue.js，但要发布数据，您可以参考此post

至于支持者，您没有提到电子邮件是否为@RequestParam, @RequestBody。为此，请在下面使用它

    @RequestMapping(value = "/moveBatch", method = RequestMethod.POST)
    public ResponseEntity singleFileUpload(@RequestPart("Email") String Email,
                                       @RequestPart("file") MultipartFile dataFile) throws IOException {
        System.out.println(String.format("Data - %s", email));
        return ResponseEntity.ok().build();
    }

因此，当您将File与任何正文或Param一起上传时，内容类型将为multipart/form-data，因此请确保在客户端添加该类型

那为什么@RequestPart，如果您看到源代码，他们在下面说了

可用于将“ multipart / form-data”请求的一部分与方法参数相关联的注释。

查看它。

Answer 2

我已经按照以下方式进行了

import config from '../config';
import {authHeader} from '../_helpers';
import axios from 'axios';
import {store} from '../_store';

export const moveBatchHistoryService = {
    getSomething
};

function getSomething(file, emailId) {
    let formData = new FormData();
    formData.append('file', file);
    formData.append('Email',emailId);    

    return axios.post(`${config.apiUrl}/api/moveBatch`, formData, { headers: { 'Content-Type': 'multipart/form-data' } })
        .then(response => {
            store.dispatch("alert/successTime", "Successfully completed the request!");
            return response.data;
        }).catch(() => {
            store.dispatch("alert/errorTime", "Unable to process your request this time. Please try again latter.");
        });
}

使用vue.js上传文件并使用axios进行spring-boot

2 个答案: