Vueバッチアップロード用のコードの書き方-フロントエンドQ&A-php.cn

Vueバッチアップロード用のコードの書き方

WBOY

リリース： 2023-05-08 09:38:06

オリジナル

1207 人が閲覧しました

近年、フロントエンドフレームワークは多くのフロントエンド開発者にとって最適なツールとなっており、その中でも vue.js は学習が容易でメンテナンスが簡単なため、開発者に好まれています。 vue.js では、ファイルアップロード機能の実装は非常に一般的な要件の 1 つであり、バッチアップロードはさまざまな Web サイトで使用されています。では、vue.js でバッチアップロードを実装するにはどうすればよいでしょうか?以下では、vue.js がバッチアップロードを実装する方法を詳しく紹介します。

1. 単純なファイルのアップロード

バッチアップロードを紹介する前に、まず vue.js での単純な単一ファイルのアップロードの実装を見てみましょう。アップロードするファイルが次のとおりであると仮定します。

<input type="file" @change="handleFileUpload"/>

ログイン後にコピー

ファイルのアップロードを処理するために、vue.js のメソッドに handleFileUpload 関数を追加します。

handleFileUpload() {
  const file = event.target.files[0]; //获取文件对象
  const formData = new FormData(); //建立FormData对象
  formData.append('file', file); //将文件添加到FormData中
  axios.post('/file/upload', formData)//使用axios发送post请求上传文件
       .then(response => {
        console.log(response);//上传成功后的响应结果
       })
}

ログイン後にコピー

このコードでは、axios を使用します。ライブラリに投稿リクエストを送信してファイルをアップロードしますが、これは他のライブラリまたはネイティブ Ajax を使用して実現することもできます。もちろん、実際のプロジェクトでは、セキュリティを確保するために認証トークンや CSRF トークンを使用する必要がある場合があります。

2. 複数ファイルのアップロード

単一ファイルのアップロードを理解した後、複数ファイルのアップロードを実装する vue.js のメソッドを紹介します。 HTML に複数選択ファイルの入力を追加します:

<input type="file" ref="fileInput" @change="handleMultipleFileUpload" multiple>

ログイン後にコピー

次に、メソッドに handleMultipleFileUpload 関数を追加します:

handleMultipleFileUpload() {
  const files = this.$refs.fileInput.files;//获取上传的文件对象
  const formData = new FormData();//建立FormData对象
  for(let i=0 ;i<files.length ;i++){
    formData.append('files', files[i]);//将文件添加到FormData对象中
  }
  axios.post('/file/multiple_upload', formData)//发送post请求上传多个文件
       .then(response => {
         console.log(response);//上传成功后的响应结果
       })
}

ログイン後にコピー

このコードを通じて、複数のファイルをアップロードできます。単一のファイルとは異なります。ファイルを formData オブジェクトに順番に追加する必要があります。 vue.js で複数のファイルをアップロードする方法はすでに理解できたと思います。

3. プログレスバー付きの複数ファイルアップロードの実装

ただし、上記の複数ファイルアップロード機能はさらに拡張する必要があります。たとえば、アップロードが成功した後でのみアップロードステータスを知るのではなく、アップロードの進行状況バーを表示したい場合は、XMLHttpRequest オブジェクトを使用してアップロードの進行状況バーを実装する必要があります。コードは次のとおりです。

handleMultipleFileUpload() {
    const files = this.$refs.fileInput.files;//获取上传的文件对象
    const formData = new FormData(); //建立FormData对象
    for(let i=0 ;i<files.length ;i++){
      formData.append('files', files[i]); //将文件添加到FormData对象中
    }
    const xhr = new XMLHttpRequest();//创建XMLHttpRequest对象实现进度条
    //upload.addEventListener用于上传进度监听
    xhr.upload.addEventListener("progress", function(evt){
      if(evt.lengthComputable){
        const percentComplete = Math.round(evt.loaded * 100 / evt.total);//计算上传进度
        console.log(`上传进度：${percentComplete}%`);
      }
    }, false);
    //ajax完成后触发的事件
    xhr.onreadystatechange=function(evt){
      if(xhr.readyState===4){//上传完成
        console.log(xhr.responseText);//上传完成后的响应结果
      }
    }
    //发送post请求上传文件
    xhr.open("POST", "/file/multiple_upload");
    xhr.send(formData);
  }

ログイン後にコピー

実は、ストリーミングメディアや大量のファイルなどの特殊なファイルをアップロードする場合、上記のアップロード方法が制限される場合があります。したがって、アップロードされるファイルの種類、ファイルサイズの制限、ネットワーク速度、ユーザーのニーズなどを理解し、対応するアップロード方法を選択することが非常に必要です。

要約すると、この記事では、単一ファイルのアップロードと複数ファイルのアップロードを実現する vue.js のメソッドを紹介し、XMLHttpRequest オブジェクトを通じてアップロードのプログレスバーの効果を実現します。これらの方法は、ファイルのアップロード機能をより適切に完了するのに役立つと思います。同時に、実際のプロジェクトでは、アップロードされたファイルをバックエンドサーバーでどのように処理するか、ファイル漏洩やデータ改ざんなどをどのように防ぐかについても考慮する必要があります。

以上がVueバッチアップロード用のコードの書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。