如何将图像或文件放入vue中的变量？

Question

我想同时将包含不同数据的图像添加到我的数据库中。我不想将 img 数据保存在不同的地方。然后我想以base64格式将图像数据添加到数据库中，但我找不到从表单中获取图像数据。我的意思是，我怎样才能在 vue 中添加图像？

Answer 1

toDataURL(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.onload = function () {
    var reader = new FileReader();
    reader.onloadend = function () {
      callback(reader.result);
    };
    reader.readAsDataURL(xhr.response);
  };
  xhr.open("GET", url);
  xhr.responseType = "blob";
  xhr.send();
},
readFile() {
  this.example = this.$refs.file.files[0];
  if (
    this.example.name.includes(".png") ||
    this.example.name.includes(".jpg")
  ) {
    this.image = true;
    this.preview = URL.createObjectURL(this.example);

    this.toDataURL(this.preview, (dataUrl) => {
      var imgBase64 = dataUrl.split("data:image/png;base64,");
      this.imageData = imgBase64[1];
      console.log(this.imageData);
     
    });
  } else {
    this.image = false;
  }
},

出口将是base64 in string