如何在vuejs中上传图片? [英] How do I upload image in vuejs?

问题描述

请，下面是我在vue组件的脚本部分中的代码.

Please, below is my code in the script section of my vue component.

我输入的所有字段都正确，但是上传的图像和视频显示为空值.

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);
            }

        },

    }

}

我真正想要实现的是上传图像和视频文件，在保存为blob之前先预览它们.

What exactly I want to achieve is upload image and video file, preview them before saving as blob.

上图显示了我的回复@samayo

The above image shows my response @samayo

图像和视频的斑点显示为空值.

The image and video blob are showing empty values.

推荐答案

如果您使用的是axios或fetch，则使用vue上传文件非常容易.

If you are using axios or fetch uploading files with vue is pretty easy.

这是我当前项目的副本/意大利面.我使用axios上传图像:

This is a copy/pasta from my current project. I use axios to upload images:

首先，您需要输入如下内容:

First you'll need to have your input look like this:

<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)
      }
    )
  }
}

这篇关于如何在vuejs中上传图片?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！