vue3+elementui-plus实现一个接口上传多个文件功能

 更新时间:2023年07月11日 10:21:21   作者:今天不要写bug  
这篇文章主要介绍了vue3+elementui-plus实现一个接口上传多个文件,先使用element-plus写好上传组件,然后假设有个提交按钮,点击上传文件请求接口,本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下

首先,先使用element-plus写好上传组件,变量的定义我在这里就省略了都

<el-form-item prop="file" label="附件">
     <el-upload
         style="width:100%"
         class="upload-demo"
         drag
         ref="upload-demo"
         action=""
         v-model="taskForm.file"
         :file-list="fileLists"
         :before-upload="handleBeforeUpload"
         :http-request="uploadFile"
         :on-remove="handleRemove"
         :on-change="handleFileChange"
         :limit="3"
         :on-exceed="handleExceed"
         :headers="headers"
         multiple
     >
         <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">
             最多上传3个附件
         </div>
         </template>
     </el-upload>
 </el-form-item>

然后,绑定的函数都补充一下

function handleBeforeUpload (file) {
        //获取上传文件大小
        let fileSize = Number(file.size / 1024 / 1024);
        if (fileSize > 100) {
            ElMessage({ message: '文件大小不能超过100MB,请重新上传。', type: 'warning'})
            return false
        }
    }
    function uploadFile (params) {
        if (params.file == null) {
            ElMessage({ message: '请选择需要上传的文件', type: 'warning'})
            return false
        }
    }
    function handleFileChange (file, fileList) {
        fileLists.value = fileList
    }
    function handleRemove (file, fileList) {
        fileLists.value = fileList
    }
    function handleExceed(files, fileList) {
        ElMessage({ message: '最多上传3个文件,请删除后重新上传!', type: 'warning'})
    }

然后,假设有个提交按钮,点击上传文件请求接口

 /** 提交按钮 */
    function submitForm() {
        proxy.$refs["taskForms"].validate(valid => {
             // 表单其他必填字段校验一下
            if (valid) {
            // 加个loading
                loading.value = ElLoading.service({
                    lock: true,
                    text: 'Loading'
                })
                // 判断是否上传了文件 没有就不用调用上传
                if (fileLists.value.length > 0) {
                    console.log('list', fileLists.value)
                    let fileData = new FormData()
                    var isAdd = false // 区别是否上传了新文件
                    var ids = [] // 编辑时存储已经回显的文件ids
                    // 这里因为编辑和新增逻辑都有,所以在编辑时需要区分,
                    // 到底是上传了新文件,还是说依旧是原来的文件,再提交一下表单,提交其他字段而已
                    // 而判断是否是最新上传的文件就依据是否有文件流raw
                    for(var i =0 ; i< fileLists.value.length; i++) {
                        // 通过是否有文件流raw判断是否上传新文件,是则append
                        if (fileLists.value[i].raw) {
                            isAdd = true
                            fileData.append('file', fileLists.value[i].raw)
                        } else {
                            // 拿到回显文件(即非新上传文件)的id
                            ids.push(fileLists.value[i].id)
                        }
                    }
                    console.log('ids=', ids)
                    fileData.append('type', 1) // type代表上传操作是哪个模块的:1任务 2总结 
                    // 若isAdd=true,则说明添加了新文件,调用上传
                    if (isAdd) {
                        uploadFileData(fileData).then((res) => {
                            console.log('upload', res)
                            if (res.code == 200) {
                                // 回显文件id数组和新上传文件得到的id数组合并
                                taskForm.value.file = ids.concat(res.result.ids)
                                console.log('file-ids',taskForm.value.file)
                                addAndEdit() // 调用保存其他字段信息的接口
                            }
                        })
                    } else {
                        taskForm.value.file = ids
                        addAndEdit() // 调用保存其他字段信息的接口
                    }
                } else {
                    taskForm.value.file = ''
                    addAndEdit() // 调用保存其他字段信息的接口
                }
            }
        })
    }

既然有编辑,那就应该做回显的逻辑,文件如何回显到上传组件上

// 点击编辑
    function editTasks (row) {
        let fileData = new FormData()
        fileData.append('fileId', row.file)
        // 获取文件名
        getFileData(fileData).then((res) => {
            console.log('test', res)
            if (res.code == 200) {
                // 就是这里,拿到文件名,然后文件回显,我这里是通过接口拿到文件名,
                // 如果你能更直接的拿到文件名,直接执行这个foreach即可
                res.result.forEach((item) => {
                // 回显重点,就是把你需要的东西push到fileList中
                    fileLists.value.push({ name: item.fileName, id: item.id })
                })
                console.log('edoite', taskForm.value, fileLists.value)
            }
        })
        taskId.value = row.id
        taskForm.value = {...row}
        taskTitle.value = '编辑任务'
        showTask.value = true
        taskForm.value.file = row.file !== 'null' ?  JSON.parse(row.file) : []    }

over 以上主要通过代码说明,可根据自己实际情况改造

到此这篇关于vue3+elementui-plus实现一个接口上传多个文件的文章就介绍到这了,更多相关vue3 elementui-plus上传多个文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vant picker 多级联动操作

    Vant picker 多级联动操作

    这篇文章主要介绍了Vant picker 多级联动操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue3  mixin 混入使用方法

    vue3  mixin 混入使用方法

    这篇文章主要介绍了 vue3  mixin 混入使用方法,mixin 混入,提供了一种非常灵活的方式,来分发 vue 组件中的可复用功能,一个mixin 对象可以包含任意组件选项,当组件使用 mixin 对象时,所有的 mixin 对象的选项将被混入组件本身的选项。,需要的朋友可以参考一下
    2021-11-11
  • Vue3中如何使用SCSS编写样式

    Vue3中如何使用SCSS编写样式

    在Vue模板中启用这些表现力库插件的最简单方法是在初始化项目时安装它们,或使用 npm install(或 yarn add)安装包,这篇文章主要介绍了Vue3中如何使用SCSS编写样式,需要的朋友可以参考下
    2023-12-12
  • 如何使用yarn创建vite项目+vue3

    如何使用yarn创建vite项目+vue3

    这篇文章主要介绍了如何使用yarn创建vite项目+vue3,详细介绍了使用vite创建vue3过程,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-03-03
  • vue3使用el-tooltip插槽达到换行效果

    vue3使用el-tooltip插槽达到换行效果

    本文主要介绍了vue3使用el-tooltip插槽达到换行效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-08-08
  • element中drawer模板的实现

    element中drawer模板的实现

    本文主要介绍了element中drawer模板的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • 在 Vue.js中优雅地使用全局事件的方法

    在 Vue.js中优雅地使用全局事件的方法

    这篇文章主要介绍了在 Vue.js中优雅地使用全局事件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • vue展示dicom文件医疗系统的实现代码

    vue展示dicom文件医疗系统的实现代码

    这篇文章主要介绍了vue展示dicom文件医疗系统的实现代码,非常不错,具有一定的参考借鉴加载,需要的朋友可以参考下
    2018-08-08
  • Vue实现多页签组件

    Vue实现多页签组件

    这篇文章主要介绍了Vue实现多页签组件的方法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2021-01-01
  • vue3 HighCharts自定义封装之径向条形图的实战过程

    vue3 HighCharts自定义封装之径向条形图的实战过程

    highcharts是国外知名基于javascript的图表库,下面这篇文章主要给大家介绍了关于vue3 HighCharts自定义封装之径向条形图的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09

最新评论