天天看點

H5上傳圖檔上傳

H5上傳圖檔

前端事件我碰見了最常見的評論上傳(實作預覽,上傳,删除)功能,就整理了一下代碼。弄了一個相對比較見簡單的功能 。

新增操作(把擷取的img路徑存儲起來) 再向伺服器上傳換取線上路徑

changeimage(event) { //新增操作
        var inmgbase64;
        this.getObjectURL(event.target.files[0]).then((res) => {
          inmgbase64 = res;
          let myformdata = new FormData()
          myformdata.set('data', inmgbase64); //看後太是否需要formdata
          //請求接口
        })
      },
      
      
      getObjectURL(file) {
        return new Promise((resolve) => {
          var reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = function(e) {
            resolve(e.target.result);
          }
        });
      }


           

效果圖

H5上傳圖檔上傳