一.如何實現在註冊時點選頭像時實現更改圖片的操作

     1.將img和input[type="file"]放在同一個div中，利用絕對定位，讓兩者擁有相同的大小，將input的預設樣式變為透明，讓img覆蓋的input之上；img中有一個屬性，accept,可以指定上傳的img的格式

         accept=“image/gif,image/jpg”...  可以指定圖片的格式

        accept="image/*"表示可以接受任何格式，不限制圖片的格式

       <div class="avatar-right">

           <img id="avatarImg" :src="chaAvatar" width="80" height="80" alt="點選更換頭像" accept="image/*">

          <input type="file" id="avatarInput" @change="changeAvatar" name="mypic" ref="fileUpload" capture="camera">

      </div>

     2.將頭像顯示出來     

changeAvatar(e){

    //將頭像的檔案上傳到後臺的伺服器端

    var form = new FormData();

    form.append('mypic',this.$refs.fileUpload.files[0]);

    console.log(this.$refs.fileUpload.files[0]);

    axios({

        method:'post',

      url:'http://172.242.10.36:3001/user/upload',

      anync:true,

     contentType:false,

     processData:false,

     data:form

    }).then((res)=>{

       if(res.data.code == 1){

         this.avatar = res.data.msg;

      }

   })

   let $target = e.target || e.srcElement

   let file = $target.files[0];

   //console.log(file.name.indexOf(".jpg"));

   if(file.name.indexOf(".jpg")!=-1 || file.name.indexOf(".png")!=-1 || file.name.indexOf(".gif") !=-1 || file.name.indexOf(".jpeg") !=-1){

      this.avatar = file.name;

      var reader = new FileReader()

       reader.onload = (data) => {

            let res = data.target || data.srcElement

            this.chaAvatar = res.result

       }

      reader.readAsDataURL(file)

     }else{

         Toast("圖片的格式不正確");

      }

  }

解釋：

    let $target = e.target || e.srcElement 表示呼叫它的各種屬性

        兩個的區別：

             ie下支援e.srcElement

             ff下支援e.target

     let file  = $target.files[0]表示取第一張圖 

     FileReader()物件允許web應用程式非同步讀取儲存在使用者計算機上的檔案(或原始資料緩衝區)的內容，使用File或Blob物件指定要讀取的檔案或資料。其中File物件可以是來自使用者一個<input>元素上選擇檔案後返回的FileList物件，也可以來自拖放操作生成的DataFransfer物件，還可以是來自一個HTMLCanvasElement上執行mozGetFile()方法後返回結果。

3.服務端接收客戶端上傳的檔案並儲存在伺服器端

     //在nodejs中引入第三方模組multer

     const multer = require("multer");

     //建立上傳檔案物件，並確定儲存的目錄

     var upload = multer({dest: '../public/img/person/'});

     //功能四：當改變圖片時，儲存在伺服器端

     router.post("/upload",upload.single("mypic"),(req,res)=>{

          var file = req.file;

         //console.log(req.file);

         //建立新檔名

         //獲取原有檔名字尾 1.jpg

         var srcFile = file.originalname;

         var i1 = srcFile.lastIndexOf(".");

         var len = srcFile.length;

         var suffix = srcFile.substring(i1,len);

        //時間戳+隨機數+字尾

        var fileName = new Date().getTime()+Math.floor(Math.random()*9999)+suffix

        var newFileName = './public/img/person/'+fileName;

       //將臨時檔案移動upload目錄

       //fs.renameSync() 阻塞(同步)

       fs.renameSync(file.path,newFileName);

       res.send({code:1,msg:fileName});

})