
一、安装插件
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>