Блог

Я использую фреймворк Quasar и Vue

У меня есть элемент ввода, который получает выбранное изображение, после чего я отправляю его в сервлет, где обрабатываю это изображение и сохраняю в папке.Если это было успешно, я отправляю простое сообщение, которое будет отображаться на странице.Сервлет работает нормально, мне нужно только знать, как установить изображение, если ответ был без ошибок.

 <div id="q-app">
    <input type="file" id="file"
           ref="file" accept=".jpg, .jpeg, .png"
           style="display:none"
           @change="handleFileUpload()"/>
    <div class="q-ma-md row justify-start">
        <div class="col-auto">
            <q-btn style="width:1000px;height:1000px;" @click="tclick">
                <q-img  height="100%" width="100%" :src="imageSrc">
                </q-img>
            </q-btn>
        </div>

    </div>
    <div class="col-auto">
        <q-btn class="q-ma-md" size="md" @click="submitFile()" color="primary" label="changeProfilePicture"></q-btn>
    </div>

</div>
 

И javascript

У меня есть методы, которые перехватывают выбранное изображение и отправляют его сервлету

 <script>
    new Vue({
        el: '#q-app',
        data () {
            return {
                file: '',
                imageSrc:'${pageContext.request.contextPath}/images/profile.jpg',
            }
        },
        methods:{
            tclick(){
                this.$refs.file.click()
            },
            handleFileUpload(){
                this.file = this.$refs.file.files[0];
            },
            submitFile(){
                let formData = new FormData();
                formData.append('file', this.file);
                axios.post( "${pageContext.request.contextPath}" "/hello-servlet",
                    formData,
                    {
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        }
                    }
                ).then(response => {
                    this.$q.notify({
                        type: 'positive',
                        message: response.data,
                        position:'center',
                        icon: 'check'
                    })
                }).catch(error => {
                    console.log(error);
                })
            },
        },
    })
</script>
 

Как я могу установить выбранное изображение в тег q-img?