Vue.js はじめに

バージョン4.5.0.0から、DEXTUploadX5（以下 X5）は Vue.js 環境をサポートします。Vue.js で X5 を使用するには、dextuploadx5-vue パッケージを使用します。

この文書では、Vue 3 と Vite ベースの環境を基準として、X5 のリスト型 UI がブラウザに生成されるまでの最小構成を説明します。

パッケージの役割

• dextuploadx5-vue: Vue.js で X5 を利用するためのプラグイン、UI コンポーネント、制御オブジェクトを提供します。
• dextuploadx5-vue-vite: Vite 環境で X5 静的リソースをプロジェクトの静的パスに配置しやすくする補助パッケージです。
• dextuploadx5-express-handler: Express サーバーで X5 のアップロード要求を処理する際に使用するサーバー側ハンドラーパッケージです。

パッケージのインストール

# クライアントプロジェクト
npm install vue dextuploadx5-vue
npm install -D vite @vitejs/plugin-vue dextuploadx5-vue-vite

X5 静的リソースの配置

ブラウザは X5 の動作に必要なスクリプトとリソースを productPath を基準に読み込みます。そのため、このパスの下に実際の X5 製品ファイルが配置されている必要があります。

import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";
import { withDEXTUploadX5 } from "dextuploadx5-vue-vite";

export default defineConfig({
  plugins: [
    vue(),
    ...withDEXTUploadX5()
  ]
});

上記のように設定すると、通常ブラウザは /dx5/ パスで X5 リソースにアクセスします。補助パッケージを使わない場合は、node_modules/dextuploadx5-vue/dist/dx5 を静的ファイルパスに直接コピーしてください。

認証キーと productPath の設定

import { createApp } from "vue";
import App from "./App.vue";
import { DEXTUploadX5Plugin } from "dextuploadx5-vue";

createApp(App)
  .use(DEXTUploadX5Plugin, {
    authKey: "jn+xziPdVh6f5KN17uFH... skip ...WiXAyO2FdI9r5XGfwxQ=",
    productPath: "/dx5/"
  })
  .mount("#app");

productPath と実際の静的ファイル配置パスが一致しない場合、コンポーネントは正常に生成されません。

リスト型 UI の生成

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

const version = ref("");

function handleCreated(id) {
  const dx = DX5.get(id);
  version.value = dx.getVersion();
}

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

<template>
  <DEXTUploadX5List
    id="dext5"
    :style="{ width: '100%', height: '320px' }"
    @created="handleCreated"
    @error="handleError"
  />
  <p>DEXTUploadX5 Version: {{ version }}</p>
</template>