Question

我使用vuejs和bootsrapt-vue在项目中工作，我想通过axios库上传任何类型的文件（图片，pdf ..etc）。当我尝试上传时，没有任何内容上传到后端。有人可以查看我的代码，告诉我做错了什么吗？我很擅长编码。

这是我的代码：

`

<template> <b-container fluid>
        <h4>Images page</h4>

        <!-- <b-form-file action="" v-model="image" plain></b-form-file> -->
       <b-form action="" method="post" v-model="image" enctype="multipart/form-data">
            <h2>Select image to upload:</h2>

            <input type="file" name="fileToUpload" id="fileToUpload">

            <b-button type="submit" name="submit" variant="success" v-on:click="uploadImage">Upload image</b-button>
        </b-form>
    </b-container>
</template>



<script>
    // eslint-disable-next-line
    /* eslint-disable */
    export default {
        name: 'imagesPage',
        data() {
            return {
                images: [],
                image: []
            }
        },
        methods: {
            uploadImage(evt) {
                evt.preventDefault()
                var data = new FormData();
                data.append('image', document.getElementById('fileToUpload').files[0])
                var token = sessionStorage.setItem('token', data, null)
                window.API.post('https://192.168.56.101:8080/images/' + token, data, null)
                .then((response) => {
                        console.log(response.data);

                    })
                    .catch((error) => {
                        console.log(JSON.stringify(error))
                    })
                console.log('blabla')
                //         this.template.push({
                //         image_id: ''
                // })
            }
        }
    }
</script>

`

使用带有Axios的Vuejs上传文件

0 个答案: