silence-file-upload

默认上传行为

安装

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