如何将图像上传到 vuejs 中的本地文件夹答案

【问题标题】：How to upload an image to a local folder in vuejs如何将图像上传到 vuejs 中的本地文件夹
【发布时间】：2021-04-01 10:40:10
【问题描述】：

我想使用 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 './'"

【问题讨论】：

标签： vue.js axios vuetify.js

【解决方案1】：

你需要服务器上的一个app来保存图片我不认为可以保存在前台app中，你可以在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,/, "");
}

【讨论】：