如何将图像或文件带到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 字符串

如何将图像或文件带到vue中的变量？

How to take image or file to a variable in vue?

node.js

vue.js

vuetify.js