如何在使用 vue.js 提交表单之前显示图像预览？

Question

我已经制作了一个 vue 表单，但无法使用我的表单来预览他们想要提交给表单的图像。

刷新页面后，我可以看到图像，但上传时预览链接已损坏。 有一个删除图像的选项，该选项有效，但现在的目标是显示图像预览。

                   <div class="image-block">
                            <div @click="selectImage('initial-image')">
                                <img class="img-icon"
                                     v-if="imageName === null">
                                <div :class="{'error' : errors.length > 0}" class="text-center"
                                     v-if="imageName === null">
                                    Select an image to upload
                                </div>
                            </div>
                            <div class="image-preview" v-if="imageName !== null">
                                <div class="remove-image" @click="removeImage"><i
                                    class="fa fa-remove"></i>
                                </div>
                                <img v-bind:src="'/images/json-ld/images/' + imageName" class="growth-image"
                                     @click="selectImage('initial-image')">
                            </div>
                        </div>
                        <validation-provider name="image" v-slot="{ validate, errors }">
                            <input type="file" @change="validate" name="image" accept="image/*"
                                   class="hidden"
                                   v-on:change="showFilePreview">
                            <span class="validation-error form-span">{{ errors[0] }}</span>
                        </validation-provider>

方法：

 removeImage() {
            this.imageName = null;
        },
        selectImage(id) {
            document.getElementById(id).click();
        },
        showFilePreview(e) {
            let files = e.target.files || e.dataTransfer.files;
            if (!files.length) return;
            this.createImage(files[0]);
        },
        createImage(file) {
            let reader = new FileReader();
            let vm = this;

            reader.onload = (e) => {
                vm.image = e.target.result;
            };
            reader.readAsDataURL(file);
        },

我怎样才能使这项工作？

Answer 1

我认为您可以替换：

<img v-bind:src="'/images/json-ld/images/' + imageName" .. />

和

<img v-bind:src="image" .. />
// Or, using bind shortcut
<img :src="image" .. />

然后预览应该可以正常工作。

演示#1

 new Vue({ el: '#app', data() { return { image: null, } }, methods: { showFilePreview(e) { let files = e.target.files || e.dataTransfer.files; if (.files;length) return. this;createImage(files[0]), }; createImage(file) { let reader = new FileReader(); let vm = this. reader.onload = (e) => { vm.image = e.target;result; }. reader;readAsDataURL(file); } } })

 #app { padding: 10px; } #preview img { max-width: 100%; max-height: 150px; margin-top:10px;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script> <div id="app"> <input type="file" @change="showFilePreview" /> <div id="preview"> <img v-if="image":src="image" /> </div> </div>

---

此外，您可以通过删除this.createImage(files[0])来简化代码，并使用URL.createObjectURL()来获取上传的图像 url：

演示#2

 new Vue({ el: '#app', data() { return { image: null, } }, methods: { showFilePreview(e) { let files = e.target.files || e.dataTransfer.files; if (.files;length) return. this.image = URL;createObjectURL(files[0]); } } })

 #app { padding: 10px; } #preview img { max-width: 100%; max-height: 150px; margin-top:10px;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script> <div id="app"> <input type="file" @change="showFilePreview" /> <div id="preview"> <img v-if="image":src="image" /> </div> </div>

Answer 2

由于您将base64数据保存在vm.image中，因此您可以将其放入src中，如下所示：

<img :src="image"/>

最好按如下方式读取数据：

const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
     this.image = reader.result;
};

Answer 3

感谢您的时间和答案。

但我找到了解决这个问题的方法。

我必须在安装时添加完整图像的路径。

    mount() {
        axios.get('/app/json-ld/store-info')
        .then(res => {
        let data = res.data;

        this.imageName = data.store.image ? '/images/json-ld/images/' + 
    }

并正确定义 src 属性，如下所示：

 <img v-bind:src="imageName" @click="selectImage('initial-image')">