Upload file using vue.js and spring-boot with axios

Question

If have a form with a text field and file upload option. The file is called start.vue(say). From that a module.js(say) file is called. Using that service.js(say) is called. That service.js calls the api in moveController.java(say). I am getting error as: Current request is not a multipart request

Tried to find the syntax so that multipart header is retained till api is called. module.js is getting the appropriate file value. But no idea about service.js

start.vue is:

<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 is:

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 is:

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 {}

current request is not multipart request in moveController.java

I know that directly I can call using axios. Even I can create form and call teh api. But I need to do according to the file structure of the project. Please suggest something ASAP. — Abhishek Dutta
– Abhishek Dutta, Commented Jun 10, 2019 at 15:31

Abhishek Dutta · Accepted Answer · 2019-06-12 11:17:18Z

2

I have done the following way.

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

answered Jun 12, 2019 at 11:17

Abhishek Dutta

854 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Avi · Accepted Answer · 2019-06-10 16:09:27Z

1

I am not very good at vue.js but for posting the data you could refer this post

As for as backed is concern you have not mentioned whether the email is @RequestParam, @RequestBody. Use this below for that

    @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();
    }

So when you upload File along with any body or Param the content-type will be multipart/form-data so make sure in client side you add the type

so why @RequestPart, if you see the source code they have said the below

Annotation that can be used to associate the part of a "multipart/form-data" request with a method argument.

Look into it.

edited Jun 10, 2019 at 16:09

answered Jun 10, 2019 at 16:03

Avi

1,5589 silver badges14 bronze badges

2 Comments

Abhishek Dutta Over a year ago

Thanks and sorry for late response. I have used formData

farahm Over a year ago

how would @RequestPart("file") MultipartFile dataFile look if you are sending multiple files and you dont know how many files will be attached?

Collectives™ on Stack Overflow

Upload file using vue.js and spring-boot with axios

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related