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 はアップロードが成功したと判断する場合があります。