前端vue3批量上传文件

1.首先得知道我后台接收的接口

/// <summary>
/// 批量上传文件
/// </summary>
/// <param name="file">上传文件二进制流</param>
/// <returns></returns>
public async Task<Result<dynamic>> PostBatchUploadFilesSave(IFormFile file)
{
    var res = new Result<dynamic>();
    try
    {
        if (file == null) throw new Exception("请上传文件");

        List<IFormFile> list = new List<IFormFile>();
        list.Add(file);

        string fileType = Path.GetExtension(file.FileName).Trim('.');
        //定义文件类型规则集合
        List<string> filesRule = new List<string>
        {
            "xls","xlsx","jpg","gif","png","mp3","mp4","pdf","ppt","pptx","rar","zip","txt","docx","doc",
        };
        //检测规则集合是否包含 忽略大小写
        bool isPass = filesRule.Any(x => string.Equals(x, fileType, StringComparison.OrdinalIgnoreCase));
        if(!isPass)
        {
            res.code = (int)ResultCode.error;
            res.message = "文件格式不合格";
            return res;
        }

        var records = await _uploadFileService.BatchUploadFileSave(list, fileType);

        res.data = records;
    }
    catch (Exception ex)
    {
        res.code = (int)ResultCode.error;
        res.message = ex.Message;
    }
    return res;
}

2.接下来才是前端

  

 

 

3.前端html是从element上找的组装的上传控件（注意：是组装的 ，不是单独一个，具体组装的样式看上面）

<div class="two_2">


                <el-upload ref="uploadRef" class="upload-demo" drag multiple :action="UploadUrl"
                    :on-success="handleAvatarSuccess" :auto-upload="false">
                    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                    <div class="el-upload__text">
                        将文件拖到此处，或 <em>点击上传</em>
                    </div>


                    <template #tip>
                        <div class="el-upload__tip">
                            仅能上传:word、excel、ppt、pdf、rar、zip、mp3、mp4、jpg、gif、png、txt
                        </div>
                    </template>
                </el-upload>



            </div>
            <div class="block_31 flex-row justify-between">
                <div class="three_1">
                    <el-button @click="closeWindow('close')">取消</el-button>
                </div>
                <div class="three_2">
                    <el-button type="primary" @click="onSubmit">确定上传</el-button>
                </div>
            </div>

 这是控件上：action绑定的上传路径

let UploadUrl = ref<string>(`${import.meta.env.VITE_pan_H5}${api.PostBatchUploadFilesSave}`);  import.meta.env.VITE_pan_H5是api请求的前缀，每个项目的前缀都不一样，api.PostBatchUploadFilesSave是我api接口的地址

4.完成上传的函数

首先引入element-plus的上传属性

 import type { UploadInstance } from 'element-plus' 

上传函数

 //上传组件
        const uploadRef = ref<UploadInstance>()
        //表单提交
        const onSubmit = () => {
            uploadRef.value!.submit()
        }

5.上面就完成了批量上传文件功能 虽然是批量上传 但是还是一个一个的请求后端接口。

6.底下我们要做上传成功后的回调事件

回调也得引入element-plus的上传回调属性

?

1	import type { UploadProps } from 'element-plus'

接着是函数 注意上面控件要绑定  :on-success="handleAvatarSuccess"   (我这是在回调后又调用另一个添加函数 平常的话你们直接判断状态码成不成功就行)

//获取返回值
        const handleAvatarSuccess: UploadProps['onSuccess'] = (
            response,
            uploadFile
        ) => {
            if (response.Data.message == "文件格式不合格") {
                return ElMessage({
                    type: 'error',
                    message: '文件格式不合格',
                })
            }
            //操作成功;
            let i = 0;
            data.userFileInfor.FileId = response.Data.data[i].FileId;
            data.userFileInfor.FileName = response.Data.data[i].FileName;
            i++;
            if (response.Data.code == 1) {
                //添加到用户文件
                PostAddUserFileSave(data.userFileInfor).then((res) => {
                    if (res.data >= 1) {
                        ElMessage({
                            type: 'success',
                            message: '上传成功',
                        })
                        closeWindow("submit");
                    }
                    else if (res.data == -8) {
                        return ElMessage({
                            type: 'error',
                            message: '文件名不可以重复',
                        })
                    }
                    else {
                        return ElMessage({
                            type: 'error',
                            message: '上传失败',
                        })
                    }
                })
                console.log(response.Data.data);
            }
            else {
                return ElMessage({
                    type: 'error',
                    message: '上传失败',
                })
            }
        }