vant uploader + nodejs 实现图片保存到服务器

vue前端代码:
template:

<template>
  <div class="home">
    <van-nav-bar
      title="首页"
    />
    <van-uploader :after-read="onRead" v-model="fileList" multiple />
  </div>
</template>

script:

<script>
import {
      apiUpLoader } from "@/request/api"; //引入封装好的axios请求接口

export default {
     
  name: "Home",
  data() {
     
    return {
     
      fileList: [] //使用组件自带的回显功能,避免造轮子
    };
  },
  components: {
     },
  created() {
     },
  mounted() {
     },
  methods: {
     
    async onRead(file) {
     
      console.log(file.file);
      file.status = "uploading"; //上传中动画
      file.message = "上传中...";
      apiUpLoader({
     
        imgData: file.content.replace(/^data:image\/\w+;base64,/, ""), //分解base64代码
        imgName: file.file.name.split(".")[0], //取出文件名
        lastmodified: file.file.lastmodified   //获取文件创建时间
      })
        .then(res => {
     
          console.log(res);
          file.status = "done";
          file.message = "上传成功";
        })
        .catch(err => {
     
          file.status = "failed";
          file.message = "上传失败";//请求接口失败时页面返回
        });
    }
  }
};
</script>

nodejs后端接口配置

app.post('/uploader', function (req, res) {
     
    const imgData = req.body.imgData;
    const imgName = req.body.imgName;
    const lastmodified = req.body.lastmodified; //对应前端的三个参数
    //Buffer()构造函数已经弃用,此处用Buffer.from建立缓冲区
    var dataBuffer = Buffer.from(imgData, 'base64'); 
    fs.writeFile('../img/' + imgName + '.png', dataBuffer, function (err) {
     
    //用fs.write写入base64数据生成图片 此处需要手动创建img文件夹,否则会报错
    //预想把路径同时写入数据库,但表未设计好,待更新验证
        if (err) {
     
            res.send(err)
        } else {
     
            res.send('上传成功')
        }
    })
})

你可能感兴趣的:(从零开始,vue,nodejs)