Как просмотреть/отобразить изображение после загрузки рядом с кнопкой загрузки в Vue.js (Element.ui)?

Я работаю над отображением/предварительным просмотром изображения после его загрузки. Я пытаюсь загрузить изображение, а затем сделать вызов axios/AJAX.

Пожалуйста, найдите код ниже:

HTML-код:

        <span>User Name</span>
           <input v-model="person_name" placeholder="Edit Me">
           <br>
           
        <!--Uploading pic -->
        <span>Display Pic</span>
           <input type="file" name="file" />
           <br>

        <!-- I want to display this uploaded pic here, before submitting the form -->

        <!-- Skipping the code to submit (button code, etc) the form -->

Код Javascript --> вызов AJAX/FETCH к API

            var formData = new FormData();
            var fileField = document.querySelector("input[type='file']");

            formData.append('username', this.person_name);
            
            formData.append('File', fileField.files[0]); // getting the file attached
            
            const body = formData;

            const init = {
                method: 'POST',
                body
            };

            fetch('http://..xyz....com', init)
                .then((response) => {
                return response.json(); // or .text() or .blob() ...
            })
                .then((text) => {
                // text is the response body
            })
                .catch((e) => {
                // error in e.message
            });
        },

Как отобразить или просмотреть изображение / фотографию в качестве аватара или чего-то еще после загрузки изображения.


javascript html vue.js file-upload element-ui
person skate_23    schedule 03.10.2020    source источник
comment
Привет @skate_23, после сохранения изображения на сервере вы можете отправить путь к изображению и поместить его в тег img :)   -  person halilcakar    schedule 03.10.2020
comment
Спасибо. Пожалуйста, не могли бы вы сказать мне, как я могу вернуть путь к изображению сразу после его загрузки? Своего рода попытка выяснить это с некоторого времени.   -  person skate_23    schedule 03.10.2020

Ответы (1)


arrow_upward
3
arrow_downward

Насколько я понимаю ваш вопрос, вы можете предварительно просмотреть загруженное изображение перед его отправкой на сервер. Вы можете подключить прослушиватель событий @change к своему input type='file', чтобы прослушивать событие изменения, а затем получать доступ к изображению, загруженному event.target.files[0]. Затем замените src тега img загруженным изображением src.

Живое демо здесь

Вы также можете отправить его на сервер сразу после загрузки методом preview() или использовать кнопку upload для отправки на сервер.

Ваш шаблон Vue:

<template>
  <div id="app">
    <img id="image" :src="imgSrc" />
    <input type=file @change="preview">
  <div>
    <button @click="upload()">Upload</button>
  </div>
  <div> {{ uploaded }} </div>
  </div>
</template>

Сценарий:

data: () => ({
  imgSrc: '',
  uploaded: ''
}),

methods: {
  preview(e) {
    var pic = document.getElementById('image')
    let imgSrc = URL.createObjectURL(e.target.files[0]);
    this.imgSrc = imgSrc
  },
  upload() {
    this.uploaded = this.imgSrc;
  }
}
person Mohammad Basit    schedule 03.10.2020