请,下面是我的 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 之前预览它们。
上图显示了我的回复@samayo
图像和视频 blob 显示空值。
我认为在你的情况下你正在寻找这样的解决方案
例子:上传图像并在提交前预览
<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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)