一、安裝插件

pnpm add @boindil/vue-file-agent-next

二、基本使用

/* main.ts */
import VueFileAgentNext from "@boindil/vue-file-agent-next";
import "@boindil/vue-file-agent-next/dist/vue-file-agent-next.css";
const app = createApp(App);
app.use(VueFileAgentNext);
...


<template>
  <VueFileAgent :uploadUrl="uploadUrl" v-model="fileRecords"></VueFileAgent>
</template>
...
<script setup>
const fileRecords = ref([]);
const uploadUrl = ref("https://www.mocky.io/v2/5d4fb20b3000005c111099e3");
</script>

三、進階配置

<template>
    <div class="upload-btn">
      <!--
      auto: 自動上傳
      linkable: 是否顯示鏈接
      theme: list列表形式，默認卡片
      multiple: 是否可以多選
      deletable: 是否可以刪除
      meta: 是否顯示文件信息
      accept: 允許上傳的文件類型
      maxSize: 允許上傳的文件大小
      maxFiles: 允許上傳的文件數量
      helpText: 提示文字
      errorText: 錯誤提示文字
    -->
      <VueFileAgent
        ref="vueFileAgent"
        v-model="fileRecords"
        :theme="'list'"
        :multiple="true"
        :deletable="true"
        :meta="true"
        :accept="'audio/*,video/*,image/*'"
        :maxSize="'2048MB'"
        :maxFiles="4"
        :linkable="true"
        :helpText="'選擇音視頻文件'"
        :errorText="{
          type: '只允許上傳視頻和音頻文件',
          size: '文件大小不能超過2G',
        }"
        @select="filesSelected($event)"
        @beforedelete="onBeforeDelete($event)"
        @delete="fileDeleted($event)"
      ></VueFileAgent>
    </div>
    <div class="el-upload-btn" @click="uploadFiles()">
      <div style="font-size: 24px; line-height: 0">
        <el-icon><UploadFilled /></el-icon>
      </div>
      <div>點擊上傳</div>
    </div>
</template>
<script setup>
import { onMounted } from "vue";
const fileRecords = ref([]);
const rawFileRecords = [];
const uploadUrl = ref("https://www.mocky.io/v2/5d4fb20b3000005c111099e3");
const uploadHeaders = ref({ "Content-Type": "form-data" });
const fileRecordsForUpload = ref([]);
const vueFileAgent = ref();
const uploadFiles = () => {
  vueFileAgent.value.upload(
    uploadUrl.value,
    uploadHeaders.value,
    fileRecordsForUpload.value
  );
  fileRecordsForUpload.value = [];
};
const deleteUploadedFile = (fileRecord) => {
  vueFileAgent.value.deleteUpload(
    uploadUrl.value,
    uploadHeaders.value,
    fileRecord
  );
};
const filesSelected = (fileRecordsNewlySelected) => {
  var validFileRecords = fileRecordsNewlySelected.filter(
    (fileRecord) => !fileRecord.error
  );
  fileRecordsForUpload.value =
    fileRecordsForUpload.value.concat(validFileRecords);
};
const onBeforeDelete = (fileRecord) => {
  var i = fileRecordsForUpload.value.indexOf(fileRecord);
  if (i !== -1) {
    fileRecordsForUpload.value.splice(i, 1);
    var k = fileRecords.value.indexOf(fileRecord);
    if (k !== -1) fileRecords.value.splice(k, 1);
  } else {
    if (confirm("您確定要刪除文件嗎？")) {
      vueFileAgent.value.deleteFileRecord(fileRecord);
    }
  }
};
const fileDeleted = (fileRecord) => {
  var i = fileRecordsForUpload.value.indexOf(fileRecord);
  if (i !== -1) {
    fileRecordsForUpload.value.splice(i, 1);
  } else {
    deleteUploadedFile(fileRecord);
  }
};
</script>
<style lang="less" scoped>
</style>

四、參數配置文檔

https://safrazik.github.io/vue-file-agent/docs/