vue上傳圖片並回顯

本文探討H5端,使用Vue+mintUI如何友好的上傳圖片並且回顯數據。

<input id="license"  type="file" style="display:none" name = 'license' accept = "image/*" @change="uploadImage('license')"/>
uploadImage (name) {
      document.getElementById(name).click()
      var files = document.getElementById(name).files
      if (files.length === 0) {
        return
      }
      var file = files[0]
      // 把上傳的圖片顯示出來
      var reader = new FileReader()
      let vm = this
      // 將文件以Data URL形式進行讀入頁面
      reader.readAsBinaryString(file)
      reader.onload = function (f) {
        var result = document.getElementById('licenseImg')
        var src = 'data:' + file.type + ';base64,' + window.btoa(this.result)
        result.src = src
        vm.license = file
      }
    },
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章