Как загрузить изображение в vuejs?
Пожалуйста, ниже приведен мой код в разделе сценариев моего компонента vue.
Я правильно понял все поля ввода, но при загрузке изображений и видео отображаются пустые значения.
Я пытался решить эту проблему, но безрезультатно.
playVideo(url) {
let video = $('#video-preview').get(0);
video.preload = 'metadata';
// Load video in Safari / IE11
if (url) {
video.muted = false;
video.playsInline = true;
video.play();
}
},
// Read a file input as a data URL.
readDataUrl(input, callback) {
if (input.files && input.files[0]) {
let fileReader = new FileReader();
fileReader.onload = function () {
callback(fileReader.result);
};
fileReader.readAsDataURL(input.files[0]);
}
else {
callback(null);
}
},
// Read a file input as an object url.
readObjectUrl(input, callback) {
if (input.files && input.files[0]) {
let fileReader = new FileReader();
fileReader.onload = function () {
let blob = new Blob([fileReader.result], {type: input.files[0].type});
let url = URL.createObjectURL(blob);
callback(url, blob);
};
fileReader.readAsArrayBuffer(input.files[0]);
}
else {
callback(null);
}
},
}
}
Чего я хочу добиться - это загрузить изображение и видеофайл, предварительно просмотреть их перед сохранением в виде BLOB-объекта.
![the response]()
На изображении выше показан мой ответ @samayo
На изображении и видеоблоке отображаются пустые значения.
Ответы
Ответ 1
Если вы используете axios
или fetch
, загрузка файлов с помощью vue довольно проста.
Это копия/макароны из моего текущего проекта. Я использую axios для загрузки изображений:
Сначала вам нужно, чтобы ваш ввод выглядел так:
<input type="file" accept="image/*" @change="uploadImage($event)" id="file-input">
Затем добавьте такой метод:
methods: {
uploadImage(event) {
const URL = 'http://foobar.com/upload';
let data = new FormData();
data.append('name', 'my-picture');
data.append('file', event.target.files[0]);
let config = {
header : {
'Content-Type' : 'image/png'
}
}
axios.put(
URL,
data,
config
).then(
response => {
console.log('image upload response > ', response)
}
)
}
}
Ответ 2
Я думаю, что в вашем случае вы ищете решение, подобное этому
пример: загрузка изображения и его предварительный просмотр перед отправкой
<template>
<div>
<img src:"previewImage" class="uploading-image" />
<input type="file" accept="image/jpeg" @change=uploadImage>
</div>
</template>
<script>
export default {
name:'imageUpload',
data(){
return{
previewImage:null
}
},
methods:{
uploadImage(e){
const image = e.target.files[0];
const reader = new FileReader();
reader.readAsDataURL(image);
reader.onload = e =>{
this.previewImage = e.target.result;
console.log(this.previewImage);
};
}
}
} // missing closure added
</script>
<style>
.uploading-image{
display:flex;
}
</style>
Ответ 3
Если вы хотите загрузить изображение и предварительно просмотреть его перед отправкой, вы можете использовать простой и функциональный способ при необходимости.
<template>
<input type="file" accept="image/*" @change="onChange" />
<div id="preview">
<img v-if="item.imageUrl" :src="item.imageUrl" />
</div>
</template>
<script>
export default {
name: 'imageUpload',
data() {
return {
item:{
//...
image : null
imageUrl: null
}
}
},
methods: {
onChange(e) {
const file = e.target.files[0]
this.image = file
this.item.imageUrl = URL.createObjectURL(file)
}
}
}
</script>