Javascript 如何在 vuejs 中上传图片？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47650154/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I upload image in vuejs?
提问by cjustinobi
Please, below is my code in the script section of my vue component.
请，下面是我的 vue 组件脚本部分中的代码。
I'm getting all the input fields right but the image and video uploads are showing empty values.
我得到了所有输入字段，但图像和视频上传显示空值。
I have tried to solve this issue but to no avail.
我试图解决这个问题，但无济于事。
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);
}
},
}
}
What exactly I want to achieve is upload image and video file, preview them before saving as blob.
我到底想要实现的是上传图像和视频文件，在保存为 blob 之前预览它们。
The above image shows my response @samayo
上图显示了我的回复@samayo
The image and video blob are showing empty values.
图像和视频 blob 显示空值。
回答by samayo
If you are using axiosor fetchuploading files with vue is pretty easy.
如果您使用axios或fetch上传文件与 vue 是相当容易的。
This is a copy/pasta from my current project. I use axios to upload images:
这是我当前项目的副本/面食。我使用 axios 上传图片：
First you'll need to have your input look like this:
首先，你需要让你的输入看起来像这样：
<input type="file" accept="image/*" @change="uploadImage($event)" id="file-input">
Then add a method like this:
然后添加一个这样的方法：
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)
}
)
}
}
回答by Kalanka
I think in your case you are looking for a solution like this
我认为在您的情况下，您正在寻找这样的解决方案
example: uploading a image and previewing it before submission
示例：上传图片并在提交前预览
<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>
回答by het
If you want to upload an image and preview it before submissionyou can use simple and functional way as optionally.
如果您想上传图像并在提交前预览它，您可以选择使用简单且实用的方式。
<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>
回答by nilloc
I'm taking from a few other peoples answers to sum it up.
我从其他几个人的答案中总结出来。
this.imageis base64 encoded and ready to send to your API.
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>
