Загрузите файл, используя vue.js и spring-boot с axios

Question

Если есть форма с текстовым полем и загрузка файла . Файл называется start.vue (скажем). Отсюда и файл module.js (скажем). Использование этого service.js (скажем) называется. Этот service.js вызывает API, скажем, в moveController.java. Я получаю сообщение об ошибке: текущий запрос не является составным запросом

Пытался найти синтаксис, чтобы многочастный заголовок сохранялся до вызова 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 is:

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

текущий запрос не является составным запросом в moveController.java

Answer 1

Я сделал следующим образом.

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.");
        });
}

Answer 2

Я не очень хорош в 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» с аргументом метода.

Посмотри на это.