默认上传行为

安装

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 |