vue 传给后台node一个文件对象,并保存在node项目的目录中

1.vue中

   <Upload
      class="writeResumeHeadImg"
      :show-upload-list="false"
      :before-upload="handleUpload"
      action="//jsonplaceholder.typicode.com/posts/">
      <img class="jm-upload-img" :class="imgClass" :src="imgUrl" />
    </Upload>

js

 handleUpload(file) {
      // 需要传给后台的file文件
      this.file = file;
      // FileReader api 为用户提供了方法去读取一个文件或者一个二进制大对象,
      // 并且提供了事件模型让用户可以操作读取后的结果
      const reader = new FileReader();
      // readAsDataURL:读取为base64格式
      reader.readAsDataURL(file);
      // onload 在文件读取成功时触发
      reader.onload = () => {
        const ImgBase64 = reader.result;
        // 实现预览,实际是拿到图片的base64数据去挂在到图片的src上
        this.imgUrl = ImgBase64;
      };
      this.postImage();
      return false;
    },
    postImage() {
      var file = this.file;
      let data = new FormData();
      data.append("file", file, file.name); //很重要 data.append("file", file);不成功
      data.append("data", 112);
      console.log(data.get("file"));
      this.axios.post("resumes/file", data, {
        headers: { "content-type": "multipart/form-data" }
    });
  }
      

 2.node中,upload为node中的新建的存图片的文件夹

//上传接口
router.post('/file', 
multer({
  //设置文件存储路径
 dest: 'upload'   //upload文件如果不存在则会自己创建一个。
}).single('file'), function (req, res, next) {
if (req.file.length === 0) {  //判断一下文件是否存在,也可以在前端代码中进行判断。
  res.json({
    status: "1",
    msg: "上传失败" + err
  });
} else {
   let file = req.file;
   let fileInfo = {};
   console.log(file);
   fs.renameSync('./upload/' + file.filename, './upload/' + file.originalname);//这里修改文件名字,比较随意。
   // 获取文件信息
   fileInfo.mimetype = file.mimetype;
   fileInfo.originalname = file.originalname;
   fileInfo.size = file.size;
   fileInfo.path = file.path;
   // 设置响应类型及编码
   res.set({
     'content-type': 'application/json; charset=utf-8'
  });
  res.json({
    status: "0",
    msg: "上传成功"
  });
}
}
);

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章