Question

我想使用 vuejs 将图像上传到本地文件夹。我该怎么做。虽然我可以显示这样的图像：

<template v-slot:[`item.logo`]="{ item }" >
    <v-avatar size="40">
        <v-img :src="require('@/assets/media/' + item.logo)"></v-img>
    </v-avatar>
</template>

这是我的代码：

 <input type="file" id="file" accept="image/*" ref="file" v-on:change="handleFileUpload" >
  .....
 <v-btn color="primary" dark text @click="save">Save</v-btn>

这是我的脚本：

handleFileUpload(e){
var files = e.target.files || e.dataTransfer.files;
if (!files.length) return;

this.createImage(files[0]);
},

createImage(file) {
  var image = new Image();
  console.log(image);
  var reader = new FileReader();
  var vm = this;

  reader.onload = (e) => {
    vm.image = e.target.result;
  };
  reader.readAsDataURL(file);
},

save() {
 let formData = new FormData();

  formData.append('file', this.file);

  axios.post( 'src/assets/media',
    formData,
    {
      headers: {
          'Content-Type': 'multipart/form-data'
      }
    }
  ).then(function(){
    console.log('SUCCESS!!');
  })
  .catch(function(){
    console.log('FAILURE!!');
  });
}

我想将图像存储在 src/assets/media 中。但我收到此错误 [Vue warn]: Error in render: "Error: Cannot find module './'"

Answer 1

你需要在服务器上有一个应用程序来保存图像我认为可以将它保存在前端应用程序中，您可以将其临时保存在localsotrage中的base 64中

imgData = createBase64Image(img);
localStorage.setItem("imgData", imgData);

function createBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    var dataURL = canvas.toDataURL("image/png");
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

如何在vuejs中将图像上传到本地文件夹

1 个答案: