Javascript 如何在vuejs中上载图像？

下面是我的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显示空值。

如果使用

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

---

我认为在你的情况下，你正在寻找这样的解决方案

示例：上传图像并在提交前预览

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

导出默认值{
名称：'imageUpload'，
数据（）{
返回{
预览图像：空
}
},
方法：{
上传图像（e）{
const image=e.target.files[0]；
const reader=new FileReader（）；
reader.readAsDataURL（图像）；
reader.onload=e=>{
this.previewImage=e.target.result；
console.log（this.previewImage）；
};
}
}
}//添加了缺少的闭包
.上传图像{
显示器：flex；
}

如果您想上传图像并在提交前预览它您可以选择使用简单实用的方式

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

导出默认值{
名称：“imageUpload”，
数据（）{
返回{
项目：{
//...
图像：空
imageUrl:null
}
}
},
方法：{
onChange（e）{
const file=e.target.files[0]
this.image=文件
this.item.imageUrl=URL.createObjectURL（文件）
}
}
} 

我从其他一些人的答案中总结出来

此.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>

导出默认值{
数据：{file:null，image:null}，
方法：{
onFileChange（）{
const reader=new FileReader（）
reader.readAsDataURL（this.file）
reader.onload=e=>{
this.image=e.target.result
console.log（this.image）
}
},
},
}

您要上传到哪个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（this.messages中的let属性）{data.append（'messages'，JSON.stringify（this.messages[property]）；}*/axios.post（'/campaign'，data）。然后（response=>{this.feedback=response.data；}）。catch（response.data）；}我如何上传视频文件，预览它并将其保存为blob。这就是我试图实现的。@samayo同样的事情也适用于图像文件。我知道如何通过访问用户的相机捕捉图像并上传它，b/c我正在开发一个库，可以做到这一点，但我不知道如何录制视频，但根据具体要求应该很容易如果我实现了该功能，我将分享

媒体设备的功能here@samayo在我选择之后，如何显示它it@Choy我忘了，我在vue上工作的时间很短，但我记得这很简单，检查一下这个小提琴你就可以得到idea@samayo顺便问一下，如果我使用的是localhost，我可以知道'consturl=''；指的是什么吗我应该改为本地主机url吗？