vue中使用axios post上傳頭像/圖片並實時顯示到頁面

前端開發中，為了更好的用戶體驗，在頭像上傳時會先將圖片顯示到頁面然后點擊保存按鈕 完成圖片的上傳成功 代碼部分有參考他人的寫法。

html代碼：

 <div id="myPhoto" v-show="personalPhoto">
        <div class="viewPhoto">
          <img src="" alt="" id="portrait"style="width: 300px;height: 300px" />
        </div>
        <div class="listBox">
          <dl>
            <dt>請上傳圖片</dt>
            <dd>
              <input type="file"id="saveImage" name="myphoto" >
            </dd>
          </dl>
        </div>
        <div class="save">
          <input type="button"  value="保存圖片" @click="imageSubmit">
        </div>
      </div>

js代碼：

//實時顯示該圖片在頁面
 great(){
          document.getElementById('saveImage').onchange = function () {
          var imgFile = this.files[0];
         // this.file = event.target.files[0];
          var fr = new FileReader();
          fr.onload = function () {
            document.getElementById('portrait').src = fr.result;
          };
          fr.readAsDataURL(imgFile);
          }
        },

js代碼部分說明：因為是在vue的methods方法中申明的函數，所以還需要在mounted 方法中使用this.great()掛載該方法。

圖片上傳部分的js代碼：

imageSubmit(){
          let x = document.getElementById('saveImage').files[0];
          console.log(x);
          let params = new FormData() ; //創建一個form對象,必須是form對象否則后端接受不到數據
          params.append('file',x,x.name);  //append 向form表單添加數據
          //添加請求頭  通過form添加的圖片和文件的格式必須是multipart/form-data
          let config = {
            headers:{'Content-Type':'multipart/form-data'}
          };
          this.$axios.post("/user/image",params,config)
            .then(function(res){
              console.log(res);
              this.imageSave = res.data.image;
              sessionStorage.setItem('headImg',this.imageSave); //將圖片保存，並能夠在其他地方加載顯示
              router.go(0);   //刷新頁面，頭像改變
            }.bind(this))
            .catch(function (error) {
              console.log(error);
            })
        }
      },

注：在后來的開發過程中發現，上傳圖片在上傳服務器前在頁面加載可以使用

var windowURL = window.URL || window.webkitURL;

框架多張上傳

多張圖片上傳邏輯同單張是一樣的，只是把圖片按每個對象給后端，另外有的框架上傳圖片之后可以顯示頁面，
這種框架有的是直接上傳有的是需要拿到回調之后自己上傳服務器，前台顯示的是base64的圖片不是服務器的圖片，這個時候調用上傳圖片需要拿到回調
里面的file對象給后台，如下圖

多張就是循環網form里面塞數據就可以

// 上傳圖片
                let params = new FormData() ;
                
                this.fileList.forEach( (item ,index) => {
                    var str = 'file' + (index+1);
                    params.append(str, this.fileList[index].file); 
                });
                params.append('count', this.fileList.length); 

                let config = {
                    headers:{'Content-Type': 'multipart/form-data'}
                };

                const toast = Toast.loading({
                    mask: true,
                    message: '加載中...'
                });
                this.apiPost('/api/upload/imgs', params, config)
                .then((res) => {
                    Toast.clear();
                    if(res.ret == 0){
                        this.fileRealDate = res.data;
                    }else{
                        Toast.fail(res.res_info);
                    }
                    return
                }, (err) => {
                    console.log(err)
                });

其中 filelist 就是框架多張上傳的回調數組格式如下

 

這個是vant的多張上傳的距離