javascript - 如何使用 Vue 设置输入文件选取的图像？

Question

我正在使用 Quasar 框架和 Vue

我有输入元素，然后我将它发送到 servlet 处理该图像并存储在文件夹中。如果成功，我发送将显示在页面上的简单消息。Servlet 工作正常，我只需要知道如何设置图像如果响应没有错误。

<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

我有捕获所选图像并将其发送到 servlet 的方法

<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 标签？

标签： javascriptjavaquasar-frameworkinput-type-file