1.0.2 • Published 12 months ago
silence-file-upload v1.0.2
默认上传行为
安装
npm i silence-file-upload
引入
import { createApp } from "vue";
import SilenceFileUpload from "silence-file-upload";
import "silence-file-upload/style.css";
const app = createApp();
app.use(SilenceFileUpload);
使用
使用默认上传行为
<template>
<file-upload v-model="fileList" action="/api">
<template #trigger>
<el-button type="primary">上传文件</el-button>
</template>
<template #tip>
文件大小不超过 500M
</template>
</file-upload>
</template>
<script lang="ts" setup>
import type { Files } from "silence-file-upload";
const fileList = ref<Files[]>([
{ fileName: "xxxxx", filePath: "" },
{ fileName: "xxxxx", filePath: "" }
]);
</script>
自定义上传行为
<template
<file-upload v-model="fileList_" :http-request="httpRequest" />
</template>
<script lang="ts" setup>
import { type Ref, ref } from "vue";
import type { Files } from "silence-file-upload";
const fileList_ = ref<Files[]>([
{ fileName: "xxx.js", filePath: "" },
{ fileName: "yyy.css", filePath: "" }
]);
function httpRequest(fileList: Ref<Files[]>, index: number, file: File) {
const formData = new FormData();
formData.append("file", file, file.name);
request({
url: "/",
method: "post",
data: formData,
onUploadProgress: function (ev: ProgressEvent) {
const progress = ev.loaded / ev.total * 100;
fileList.value[index].progress = progress;
if (progress === 100) fileList.value[index].status = "success";
}
}).then(res => {
if (res.code === 200) {
fileList.value[index].status = "success";
fileList_.value.push({
fileName: fileList.value[index].fileName,
filePath: fileList.value[index].filePath
});
}
}).catch(() => {
fileList.value[index].status = "error";
})
}
</script>
想要显示进度条和上传状态需要手动更新 Files.progress
和 Files.status
。
属性
属性名 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
v-model | 绑定值 | Files[] | —— | [] |
multiple | 是否允许多选 | boolean | true/false | true |
maxFileSize | 允许上传的文件最大限制(M) | number | —— | 500 |
action | 文件上传地址 | string | —— | —— |
headers | 请求头 | { key: string: string } | —— | {} |
事件
事件名 | 说明 | 回调参数 |
---|---|---|
onSuccess | 文件上传后提供服务器返回信息 | (res: any, index: number) => void |
httpRequest | 自定义上传行为 | (fileList: Ref<Files[]>, index: number, file: File) => any |