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...

相关推荐
一树山茶14 小时前
uniapp的双token
前端·javascript
正义的大古14 小时前
OpenLayers地图交互 -- 章节六:范围交互详解
前端·javascript·vue.js·openlayers
訾博ZiBo15 小时前
【文本朗读小工具】- 快速、免费的智能语音合成工具
前端
天蓝色的鱼鱼15 小时前
低代码是“未来”还是“骗局”?前端开发者有话说
前端
答案answer15 小时前
three.js着色器(Shader)实现数字孪生项目中常见的特效
前端·three.js
城管不管15 小时前
SpringBoot与反射
java·开发语言·前端
JackJiang16 小时前
即时通讯安全篇(三):一文读懂常用加解密算法与网络通讯安全
前端
一直_在路上16 小时前
Go架构师实战:玩转缓存,击破医疗IT百万QPS与“三大天灾
前端·面试
早八睡不醒午觉睡不够的程序猿16 小时前
Vue DevTools 调试提示
前端·javascript·vue.js
恋猫de小郭16 小时前
基于 Dart 的 Terminal UI ,pixel_prompt 这个 TUI 库了解下
android·前端·flutter