如何在 vuejs 中上传图片?
Posted
技术标签:
【中文标题】如何在 vuejs 中上传图片?【英文标题】:How do I upload image in vuejs? 【发布时间】:2018-05-18 21:49:53 【问题描述】:请,下面是我的 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 显示为空值。
【问题讨论】:
您要上传到哪个 URL?是 put/post 请求吗? 我正在使用:submit() let data = new FormData; data.append('description', this.description); data.append('displays', this.boards); data.append('messages', JSON.stringify(this.messages)); /*for(let property in this.messages) data.append('messages', JSON.stringify(this.messages[property])); */ axios.post('/campaign', data).then(response => this.feedback = response.data; ).catch(response.data); 【参考方案1】:我从其他几个人的答案中总结出来。
this.image
采用 base64 编码,可以发送到您的 API。
<template>
<v-file-input
v-model="file"
chips
accept="image/*"
label="Image"
@change="onFileChange"
/>
</template>
<script>
export default
data: file: null, image: null ,
methods:
onFileChange()
const reader = new FileReader()
reader.readAsDataURL(this.file)
reader.onload = e =>
this.image = e.target.result
console.log(this.image)
,
,
</script>
【讨论】:
【参考方案2】:如果您想上传图片并在提交前预览,您可以选择使用简单实用的方式。
<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>
【讨论】:
【参考方案3】:我认为在您的情况下,您正在寻找这样的解决方案
示例:上传图片并在提交前预览
<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>
【讨论】:
请注意,此代码不会在任何地方上传任何内容,它只是从驱动器中读取文件并将其显示在浏览器中。【参考方案4】:如果你使用 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)
)
【讨论】:
如何上传视频文件、预览并保存为 blob。这就是我想要达到的目标。 @samayo 同样适用于图像文件。 我知道如何通过访问用户的相机并上传它来捕获图像,b/c 我正在开发一个库,但我不知道如何录制视频,但它应该根据mediaDevices
的规范轻松一点,如果我在这里实现该功能,我会分享一下
@samayo 选择后如何显示图片
@Choy 我忘了,我在 vue 上工作过很短暂,但我记得很容易,检查这个小提琴jsfiddle.net/97dzkf70你可以得到这个想法
@samayo 顺便说一句,我可以知道什么是`const URL = 'foobar.com/upload'; `指?如果我使用 localhost,是否应该更改为 localhost url?以上是关于如何在 vuejs 中上传图片?的主要内容,如果未能解决你的问题,请参考以下文章
vuejs开发组件分享之H5图片上传压缩及拍照旋转的问题处理