vueでjsでJSZipを用いてフロントエンドでファイルを解凍する

10361 ワード
vue
1、vueファイルのhtmlにelementのアップロードコントロールを導入し、コードは以下の通りである.

	
		    
		
    zip

2、プロジェクトにJSZipツールを導入し、そのインタフェースを呼び出してファイルの解凍を実現する.具体的には、まずvue-cliが生成したプロジェクトで以下の命令を実行してJSZipをインストールする必要がある.
npm i jszip -S  or  npm install jszip

3、インストール完了後node_modulesディレクトリの下にjszipフォルダが表示されます.scriptでrequireを宣言してjszipを導入するか、importでインポートします.
var JSZip = require("jszip");
or
import JsZip from 'jszip'

4、在
のmethodsに圧縮パッケージをアップロードする前のトリガイベントhandleBeforeを追加します.span>
<p></p>
<p><span></span></p>
<pre><code class="language-javascript">handleBefore(file) {
var new_zip = new JSZip();</code></pre>
<pre><code class="language-javascript"><span> </span>new_zip.loadAsync(file)
.then(function(file) {
//you now have every files contained in the loaded zip
new_zip.file("testTXT.txt").async("string")/ここでは圧縮パッケージのtestTXT.txtファイルはstring形式でコンテンツを返し、zipのすべてのファイルを取得できます.
.then(function (content) {
//use content
alert(content)
});
});
}</code></pre>
<br>
<p>5、最終効果は以下の通り:</p>
<p>アップロードボタンをクリックします:</p>
<p><a href="https://img.私たちcom/image/info8/9b446313821b482a9bcec09fdd3521dc.png"target="_blank"><img src="https://img.私たちcom/image/info8/9b446313821b482a9bcec09fdd3521dc.png"alt="はvue.jsでJSZipを使用してフロントエンドでファイルを解凍します_1枚目の画像「width=」217「height=」116「style=」border:1 px solid black;"></a><br></p>
<p>次に、選択ボックスをポップアップし、圧縮パッケージファイルを選択します:</p>
<p><a href="https://img.私たちcom/image/info8/b740f98b180c4dbaa632935215d046ee.jpg"target="_blank"><img src="https://img.私たちcom/image/info8/b740f98b180c4dbaa632935215d046ee.jpg"alt="はvue.jsでJSZipを使用してフロントエンドでファイルを解凍します_2枚目の画像「width=」650「height=」425「style=」border:1 px solid black;"></a><br></p>
<p>開くをクリックすると、解析圧縮パッケージのtestTXTがポップアップする.txtファイルの内容:</p>
<p><a href="https://img.私たちcom/image/info8/10f619fce3e04bf0803d87ca65a4e2cf.png"target="_blank"><img src="https://img.私たちcom/image/info8/10f619fce3e04bf0803d87ca65a4e2cf.png"alt="はvue.jsでJSZipを使用してフロントエンドでファイルを解凍します_3枚目の画像「width=」441「height=」172「style=」border:1 px solid black;"></a></p>
<p>[OK]をクリックすると、ファイルのアップロードが開始します:</p>
<p><a href="https://img.私たちcom/image/info8/c0ef1e3d6f754982a451d16608147053.png"target="_blank"><img src="https://img.私たちcom/image/info8/c0ef1e3d6f754982a451d16608147053.png"alt="はvue.jsでJSZipを使用してフロントエンドでファイルを解凍します_4枚目の画像「width=」374「height=」119「style=」border:1 px solid black;"></a><br></p>
<p>アップロードが完了したら図のように:</p>
<p><a href="https://img.私たちcom/image/info8/02d4375744ce48178801aea0011869a8.png"target="_blank"><img src="https://img.私たちcom/image/info8/02d4375744ce48178801aea0011869a8.png"alt="はvue.jsでJSZipを使用してフロントエンドでファイルを解凍します_5枚目の画像「width=」362「height=」116「style=」border:1 px solid black;"></a><br></p>
<p>これはelement-uiのuploadコントロールで完了し、簡単な構成だけで、詳細アドレス</p>
<p>JSZip詳細は</p>
</div>
</div>
</div>
</div>
</div>
<!--PCとWAPの適応版-->
<div id="SOHUCS"sid="1296592822689931264"></div>
<script type="text/javascript"src="/views/front/js/chanyan.js">
興味があるかもしれません
  • LeetCode[Math] - #66 Plus One
    Cwind
    java LeetCode 問題解 Algorithm Math
  • JQuery中$.ajax()メソッドパラメータの詳細
    AILIKES
    JavaScript jsonp jquery Ajax json
  • JConsole&JVisualVMリモート監視WebphereサーバJVM
    Kai_Ge
    JVisualVM JConsole Webphere
  • カスタムannotation
    120153216
    annotation
  • CentOS 5/6.X EPEL YUMソース使用
    2002wmj
    centos
  • SQLSERVERで欠落および不要なインデックスSQLを検索
    357029540
    SQL Server
  • Spring 3 MVCノート(二)—json+rest最適化
    7454103
    Spring3 MVC
  • 「」を置き換えるときにUnexpected internal error near index 1^
    adminjun
    java 「置換」
    • アルファベットで分類:
    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z その他
    トップページ -
    私たちについて -
    構内検索 -
    Sitemap -
    権利侵害苦情
    著作権すべてのIT知識ベースCopyRight© 2000-2050 IT知識ベースIT 610.com , All Rights Reserved.
    京ICP備09083238号









    Pythonで文字列をバイナリに変換する方法
    CSVファイルを読み書きする方法