#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;
}
}