Vue で js を使用して、ビデオ プレビュー、画像プレビュー、テキスト プレビューを実現する

効果は次の図のとおりです。

 

1. まず、テンプレートにいます:

  <div v-if="textUrl" class="imgPreview"> 
    { 
  
  { textUrl }} 
  </div> 
  <div v-if="videoUrl" class="imgPreview"> 
    <video alt="" style="width: 300px;高さ:300px" コントロール> 
      <source :src="videoUrl" type="video/mp4"> 
      <source :src="videoUrl" type="video/ogg"> 
    </video> 
  </div> 
  <div v-if="photoUrl" class="imgPreview"> 
    <img :src="photoUrl" alt="" style="width:300px;height:300px"> 
  </div> 
</div>

ここでは、v-if を使用してさまざまな効果を表示しています。

2. 方法は次のとおりです。

getAccessData(absolutePath,index) { 
  this.picListIndex = index 
  this.currentPicPath = absolutePath //パス
  let picIndex = absolutePath.lastIndexOf('.'); 
  this.ext = absolutePath.substr(picIndex + 1);//ファイル タイプ
  let param = new FormData(); 
  param.append('file', absolutePath); 
  if (this.ext == 'jpg' || this.ext == 'png' || this.ext == 'gif' || this.ext == 'jpeg') { 
//独自のファイル サービス インターフェイスに対応する、パラメーターを参照してください
    getFilePhoto(this.$route.query.token,param).then(res => { ,, 
      let _this = this 
      let blob = new Blob([res.data]) 
      var reader = new window.FileReader(); 
      reader.readAsDataURL(blob); 
      reader.onloadend = function (e) {
        _this.photoUrl = e.target.result 
        _this.textUrl= ''; 
        _this.videoUrl= ''; 
        console.log(_this.photoUrl) 
      } 
    }) 
  } 
  if (this.ext == 'mp4' || this.ext == 'avi' || this.ext == 'rmvb' || this.ext == ' rm' || this.ext == 'flv') { 
//対自己文件服务接口，看好参数
    getFilePhoto(this.$route.query.token,param).then(res => { 
      let _this = this 
      let blob = new Blob([res.data],{type:'video/mp4'}) 
      var reader = new window.FileReader(); 
      reader.readAsDataURL(blob); 
      reader.onloadend = 関数 (e) { 
        _this.videoUrl = e.target.result 
        _this.
        _this.photoUrl= ''; 
      } 
    }) 
  }
  if (this.ext == 'txt' ||this.ext == 'doc' || this.ext == 'docx' || this.ext == 'xls' || this.ext == 'xlsx' || this.ext == 'pdf') { 
//対応する自己文件服务接口，参照参照数
    getFilePhoto(this.$route.query.token,param).then(res => { 
      let _this = this 
      let blob = new Blob([res.data]) 
      var reader = new window.FileReader(); 
      reader.readAsText(blob,'utf-8'); 
      reader.onloadend = function (e) { 
        _this.textUrl = e.target.result 
        _this.photoUrl= ''; 
        _this.videoUrl= ''; 
        console.log(_this.textUrl) 
      } 
    }) 
  } 
}

詳細: data の初期定義は、グローバル呼び出しに便利です。

インターフェイスのパラメータの形式: