Vue でファイル アップロードを実装するための完全なガイド (axios、element-ui)

Vue でファイル アップロードを実装するための完全なガイド (axios、element-ui)

最新の Web アプリケーションでは、ファイル アップロードは基本機能になっています。アバター、写真、ドキュメント、ビデオのいずれをアップロードする場合でも、ユーザーのコンピュータからサーバーにファイルをアップロードするための信頼できる方法が必要です。

この記事では、Vue、axios、element-ui を使用してファイルのアップロードを実装する方法について詳細なガイドを提供します。

1. axios とは

axios は、ブラウザーおよびnode.js 用の Promise ベースの HTTP クライアントです。 IE8 以降だけでなく、最新のブラウザもすべてサポートしています。さらに、axios は、多くの一般的な XHR リクエストと API の多くの詳細をエレガントに処理します。 axios を使用すると、ファイル アップロード機能を簡単に実装できます。

2. element-ui で基本的なページとフォームを作成する

まず、基本的なページとフォームを作成しましょう。 element-ui を使用して単純なフォームを構築し、ユーザーがアップロードしたファイルを収集します。

<template>
  <div class="upload-form">
    <el-upload :action="serverUrl" :on-success="uploadSuccess" :headers="headers"
               :before-upload="beforeUpload" :on-error="uploadError">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="upload-tip">只能上传jpg/png文件，且不超过2MB</div>
    </el-upload>
  </div>
</template>

<script>
export default {
  data () {
    return {
      serverUrl: '/api/upload',
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }
  },
  methods: {
    beforeUpload (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    uploadSuccess (response) {
      console.log(response.data)
      this.$message.success('头像上传成功!')
    },
    uploadError (error) {
      console.log(error)
      this.$message.error('上传头像图片失败!')
    }
  }
}
</script>

<style scoped>
.upload-form {
  margin-top: 20px;
  text-align: center;
}
.upload-tip {
  margin-top: 10px;
  color: #999;
}
</style>

ここでは、element-ui のアップロード コンポーネントを使用し、アップロード関連の設定とイベントをいくつか定義します。ユーザーがファイルを選択してアップロード ボタンをクリックすると、次の操作が実行されます。

• アップロードする前に、渡されたファイル オブジェクトから画像のタイプとファイル サイズを確認します。要件を満たしていません アップロードを禁止し、ユーザーにエラー メッセージを表示します;
• アップロードが成功すると、応答データを出力し、アップロード成功のメッセージをユーザーに送信します;
• アップロードに失敗した場合はエラーを出力し、ユーザーにエラーメッセージを送信します。

3. ファイルのアップロードを実装する Vue コンポーネント

ユーザーがアップロードしたファイルを収集するための簡単なフォームを作成したので、次にファイルをアップロードする必要があります。サーバーに。このタスクには axios を使用します。

<template>
  <!-- 这里插入上一部分的代码 -->
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      serverUrl: '/api/upload',
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }
  },
  methods: {
    beforeUpload (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    uploadSuccess (response) {
      console.log(response.data)
      this.$message.success('头像上传成功!')
    },
    uploadError (error) {
      console.log(error)
      this.$message.error('上传头像图片失败!')
    },
    uploadFile (file) {
      const formdata = new FormData()
      formdata.append('file', file)
      axios.post(this.serverUrl, formdata, {
        headers: this.headers
      }).then((response) => {
        this.uploadSuccess(response)
      }).catch((error) => {
        this.uploadError(error)
      })
    }
  }
}
</script>

<style scoped>
  <!-- 这里插入上一部分的代码 -->
</style>

上記のコードでは、axios を導入し、ファイルをアップロードするためのメソッド UploadFile を定義しました。このメソッドでは、まず FormData インスタンスを作成し、リクエストとともにファイルをサーバーに送信します。次に、axios.post メソッドを呼び出してファイルをサーバーにアップロードします。応答が成功または失敗した場合、対応する応答関数を呼び出して成功またはエラー メッセージをユーザーに送信します。

4. Vue アプリケーションでのファイル アップロード コンポーネントの使用

アップロード機能を備えたコンポーネントを作成したので、それを Vue アプリケーションに統合します。

<template>
  <div>
    <NavigationBar /> <!-- 插入导航栏组件代码 -->
    <UploadForm /> <!-- 插入上传表单组件代码 -->
  </div>
</template>

<script>
import NavigationBar from './components/NavigationBar.vue'
import UploadForm from './components/UploadForm.vue'

export default {
  components: {
    NavigationBar,
    UploadForm
  }
}
</script>

ここでは、NavigationBar コンポーネントと UploadForm コンポーネントを紹介し、メインの Vue コンポーネントのテンプレートに配置します。

5. バックエンド サーバー

最後に、アップロードされたファイルを受け入れてサーバーに保存するバックエンド サーバーが必要です。以下は簡単な Express サーバーの例です。

const express = require('express')
const bodyParser = require('body-parser')
const multer  = require('multer')
const app = express()

const upload = multer({ dest: 'uploads/' })

app.use(bodyParser.json())
app.use(bodyParser.urlencoded())

app.post('/api/upload', upload.single('file'), (req, res) => {
  console.log(req.file)
  res.status(200).json({
    success: true,
    message: 'File uploaded successfully!'
  })
})

app.listen(3000, () => {
  console.log('Server listening on port 3000')
})

この Express サーバーでは、multer ミドルウェアを使用してアップロードされたファイルを解析し、アップロード フォルダーに保存します。次に、アップロードされたファイル情報をルート ハンドラーに出力し、成功応答をクライアントに送信します。実際のニーズに応じてファイルをアップロードできます。

概要

この記事では、Vue、axios、および element-ui を使用して、ファイル アップロード機能を備えた Web アプリケーションを作成する方法を検討しました。 element-ui アップロード コンポーネントを使用してユーザーがアップロードしたファイルを収集し、axios を使用して HTTP 経由でファイルをサーバーにアップロードする方法を学びました。同時に、アップロードされたファイルを受け入れて解析するための Express サーバーを作成する方法も学びました。

これは、Vue アプリケーションにファイル アップロード機能を実装するのに役立つ詳細かつ包括的なガイドです。ご質問やご意見がございましたら、コメント欄に残してください。

以上がVue でファイル アップロードを実装するための完全なガイド (axios、element-ui)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。