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