www.dextsolution.com
DEXTUPLOAD
X5
製品の説明 > Vue.js > アップロード

# Vue.js アップロード

この文書では、Vue.js 環境で DEXTUploadX5（以下 X5）のアップロードを接続する最小限の流れを説明します。はじめに 文書でプラグインの適用とコンポーネント生成が完了していることを前提とします。

アップロードの基本フロー
  - DEXTUploadX5List または他の X5 UI コンポーネントを生成します。
  - コンポーネント生成後にアップロード処理 URL を指定します。
  - ユーザーがファイルまたはフォルダーを追加します。
  - upload() を呼び出してサーバー送信を開始します。
  - サーバーはアップロードを処理し、HTTP 200 応答を返します。
  - クライアントは @upload-completed または @error で結果を処理します。
クライアントでアップロード URL を指定

      <script setup>
      import { ref } from "vue";
      import { DX5, DEXTUploadX5List } from "dextuploadx5-vue";

      const ready = ref(false);

      function handleCreated(id) {
        const dx = DX5.get(id);
        dx.setUploadURL("/api/upload");
        ready.value = true;
      }

      function handleUploadCompleted(id, result) {
        console.log(result);
      }

      function handleError(id, code, msg) {
        alert(id + " => " + code + "\n" + msg);
      }
      </script>

      <template>
        <DEXTUploadX5List
          id="dext5"
          :style="{ width: '100%', height: '320px' }"
          @created="handleCreated"
          @error="handleError"
          @upload-completed="handleUploadCompleted"
        />
      </template>

ファイル追加とアップロード実行

      function addFiles() {
        DX5.get("dext5")?.openFileDialog();
      }

      function addFolder() {
        DX5.get("dext5")?.openFolderDialog();
      }

      function upload() {
        DX5.get("dext5")?.upload("AUTO");
      }

Express サーバー処理

      # サーバープロジェクト
      npm install express multer dextuploadx5-express-handler

      import express from "express";
      import { createDEXTUploadX5Handler } from "dextuploadx5-express-handler";

      const router = express.Router();

      router.post("/api/upload", createDEXTUploadX5Handler({
        uploadDir: process.env.DEXT_UPLOAD_DIR,
        tempDir: process.env.DEXT_TEMP_DIR,
        onComplete: async ({ res, files }) => {
          const results = [];

          for (const file of files) {
            const saved = await file.save();
            results.push(saved.name);
          }

          res.status(200).type("text/plain; charset=utf-8").send(results.join("\n"));
        }
      }));

      export default router;

  サーバーでエラーが発生しているのに 200 で応答すると、X5 はアップロードが成功したと判断する場合があります。