vue3 上传插件vue-file-agent-next

一、安装插件

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

二、基本使用

javascript 复制代码
/* 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);
...
xml 复制代码
<template>
  <VueFileAgent :uploadUrl="uploadUrl" v-model="fileRecords"></VueFileAgent>
</template>
...
<script setup>
const fileRecords = ref([]);
const uploadUrl = ref("https://www.mocky.io/v2/5d4fb20b3000005c111099e3");
</script>

三、进阶配置

ini 复制代码
<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>

四、参数配置文档

safrazik.github.io/vue-file-ag...

相关推荐
xianxin_6 小时前
CSS Opacity(透明度)
前端
渐行渐远君489016 小时前
AI Agent智能体与MCP Server开发实践
前端·人工智能
OEC小胖胖7 小时前
构建单页应用:React Router v6 核心概念与实战
前端·react.js·前端框架·web
ss2737 小时前
手写MyBatis第46弹:多插件责任链模式的实现原理与执行顺序奥秘--MyBatis插件架构深度解析
前端·javascript·html
VIP_CQCRE7 小时前
身份证识别及信息核验 API 对接说明
java·前端·数据库
白菜豆腐花7 小时前
优雅使用ts,解放双手
前端
用户882093216677 小时前
JavaScript 的词法作用域以及作用域链
前端·javascript
东华帝君7 小时前
HTML5 History API:解决AJAX应用的历史记录问题
前端
一枚前端小能手7 小时前
🔥 z-index明明设了999999还是不生效呢
前端·css