vue+node实现图片上传及预览的示例方法

<template>
 <div>
  <myheader : =\"\'发布动态\'\">
   <i class=\"iconfont icon-fanhui1 left\" slot=\"left\" @click=\"goback\"></i>
  </myheader>
  <div class=\"upload\">
   <div v-if=\"userInfo._id\">
    <!--图片上传-->
    <div class=\"weui-gallery\" id=\"gallery\">
     <span class=\"weui-gallery__img\" id=\"galleryImg\"></span>
     <div class=\"weui-gallery__opr\">
      <a href=\" :\" rel=\"external nofollow\" class=\"weui-gallery__del\">
       <i class=\"weui-icon-delete weui-icon_gallery-delete\"></i>
      </a>
     </div>
    </div>
    <div class=\"weui-cells weui-cells_form\">
     <div class=\"weui-cell\">
      <div class=\"weui-cell__bd\">
       <textarea class=\"weui-textarea\" v-model=\"content\" placeholder=\"你想说啥\" rows=\"3\"></textarea>
      </div>
     </div>
     <div class=\"weui-cell\">
      <div class=\"weui-cell__bd\">
       <div class=\"weui-uploader\">
        <div class=\"weui-uploader__bd\">
         <ul class=\"weui-uploader__files\" id=\"uploaderFiles\">
          <li ref=\"files\" class=\"weui-uploader__file\" v-for=\"(image,index) in images\" :key=\"index\"
            :style=\"\'backgroundImage:url(\' + image +\' )\'\"><span @click=\"deleteimg(index)\" class=\"x\">×</span></li>
         </ul>
         <div v-show=\"images.length < maxCount\" class=\"weui-uploader__input-box\">
          <input @change=\"change\" id=\"uploaderInput\" class=\"weui-uploader__input \" type=\"file\"
             multiple accept=\"image/*\">
         </div>
        </div>
       </div>
      </div>
     </div>
    </div>
    <a class=\"weui-btn weui-btn_primary btn-put\" style=\"margin: 20px \" @click.prevent.once=\"put\">发送</a>
   </div>
   <unlogin v-else> </unlogin>
  </div>
 </div>
</template>

<ul class=\"weui-uploader__files\" id=\"uploaderFiles\">
 <li ref=\"files\" class=\"weui-uploader__file\" v-for=\"(image,index) in images\" :key=\"index\"
   :style=\"\'backgroundImage:url(\' + image +\' )\'\"><span @click=\"deleteimg(index)\" class=\"x\">×</span></li>
</ul>
<div v-show=\"!this.$refs.files||this.$refs.files.length < maxCount\" class=\"weui-uploader__input-box\">
 <input @change=\"change\" id=\"uploaderInput\" class=\"weui-uploader__input\" type=\"file\"
     multiple accept=\"image/*\">
</div>

data() {
   return {
    content: \'\',//分享动态的文字内容
    maxSize: 10240000 / 2,//图片的最大大小
    maxCount: 8,//最大数量
    filesArr: [],//保存要上传图片的数组
    images: []//转成 64后的图片的数组
   }
  }

deleteimg(index) {
    this.filesArr.splice(index, 1);
    this.images.splice(index, 1);
   }

change(e) {
    let files = e.target.files;
    // 如果没有选中文件，直接返回
    if (files.length === 0) {
     return;
    }
    if (this.images.length + files.length > this.maxCount) {
     Toast(\'最多只能上传\' + this.maxCount + \'张图片！\');
     return;
    }
    let reader;
    let file;
    let images = this.images;
    for (let i = 0; i < files.length; i++) {
     file = files[i];
     this.filesArr.push(file);
     reader = new FileReader();
     if (file.size > self.maxSize) {
      Toast(\'图片太大，不允许上传！\');
      continue;
     }
     reader.  = (e) => {
      let img = new Image();
      img.  = function () {
       let canvas = document.createElement(\'canvas\');
       let ctx = canvas.getContext(\'2d\');
       let w = img.width;
       let h = img.height;
       // 设置 canvas 的宽度和高度
       canvas.width = w;
       canvas.height = h;
       ctx.drawImage(img, 0, 0, w, h);
       let  64 = canvas.toDataURL(\'image/png\');
       images.push( 64);
      };
      img.src = e.target.result;
     };
     reader.readAsDataURL(file);
    }
   }

put() {
    Indicator.open(\'发布中...\');
    let self = this;
    let content = this.content;
    let param = new FormData();
    param.append(\'content\', content);
    param.append(\'username\', this.userInfo._id);
    this.filesArr.forEach((file) => {
     param.append(\'file2\', file);
    });
    self.axios.post(\'/upload/uploadFile\', param, {
     headers: {
      \"Content-Type\": \"application/x-www-form-urlencoded\"
     }
    }).then(function (result) {
     console.log(result.data);
     self.$router.push({path: \'/home\'});
     Indicator.close();
     Toast(result.data.msg)
    })
   }

let filePath;
let fileName;

let Storage = multer.diskStorage({
  destination: function (req, file, cb) {//计算图片存放地址
    cb(null, \'./public/img\');
  },
  filename: function (req, file, cb) {//图片文件名
    fileName = Date.now() + \'_\' + parseInt(Math.random() * 1000000) + \'.png\';
    filePath = \'./public/img/\' + fileName;
    cb(null, fileName)
  }
});
let upload = multer({storage: Storage}).any();//file2表示图片上传文件的key

router.post(\'/uploadFile\', function (req, res, next) {
  upload(req, res, function (err) {
    let content = req.body.content || \'\';
    let username = req.body.username;
    let imgs = [];//要保存到数据库的图片地址数组
    if (err) {
      return res.end(err);
    }
    if (req.files.length === 0) {
      new Pyq({
        writer: username,
        content: content
      }).save().then((result) => {
        res.json({
          result: result,
          code: \'0\',
          msg: \'上传成功\'
        });
      })
    }
    /*client.delete(\'public/img/1.png\', function (err) {
      console.log(err)
    });*/
    let i = 0;
    req.files.forEach((item, index) => {
      let filePath = `./public/img/${item.filename}`;
      put(item.filename,filePath,(result)=>{
        imgs.push(result.url);
        i++;
        if (i === req.files.length) {
        //forEach循环是同步的，但上传图片是异步的，所以用一个i去标记图片是否全部上传成功
        //这时才把数据保存到数据库
          new Pyq({
            content: content,
            writer: username,
            pimg: imgs
          }).save().then(() => {
            res.json({
              code: \'0\',
              msg: \'发布成功\'
            });
          })
        }
      })
    })
  })
});