<template> <div>  <myheader :title="'發布動態'">   <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="javascript:" 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: []//轉成base64后的圖片的數組   }  }

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.onload = (e) => {      let img = new Image();      img.onload = 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 base64 = canvas.toDataURL('image/png');       images.push(base64);      };      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表示圖片上傳文件的keyrouter.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: '發布成功'            });          })        }      })    })  })});