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

#javascript #html #vue.js #file-upload #element-ui

#javascript #HTML #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
            });
        },

  

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

Комментарии:

1. Привет @skate_23, после сохранения изображения на сервере вы можете отправить обратно путь к изображению и поместить его в img тег 🙂

2. Спасибо. Пожалуйста, не могли бы вы сказать мне, как я могу отправить обратно путь к изображению сразу после его загрузки? Вроде как пытаюсь понять это с некоторого времени.

Ответ №1:

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

Живая демонстрация здесь

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

Ваш шаблон 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;
  }
}