如何在 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】:

如果你使用 axiosfetch 使用 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图片上传压缩及拍照旋转的问题处理

uniapp怎么实现选择和上传图片分开

如何使用 Axios 将图像从 VueJS 上传到 Symfony?

vue + multer 上传图片

ckeditor 如何在asp中配置上传图片

android中如何上传图片到FTP服务器