菜鸟学堂 服务器常用软件 主机测评网在线工具
快捷导航
爱站统计广告　商业广告，理性选择
广告　商业广告，理性选择
广告　商业广告，理性选择
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue3 elementui-plus上传文件

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

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

脚本之家 / 编程助手：解决程序员“几乎”所有问题！
脚本之家官方知识库 → 点击立即使用

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<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>
登录后复制免费讲解

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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'})
    }
登录后复制免费讲解

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/** 提交按钮 */
   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() // 调用保存其他字段信息的接口
               }
           }
       })
   }
登录后复制免费讲解

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 点击编辑
    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上传多个文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
蓄力AI

微信公众号搜索 “ 脚本之家 ” ，选择关注

程序猿的那些事、送书等活动等着你

原文链接：https://blog.csdn.net/weixin_52443895/article/details/131590202

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 reterry123@163.com 进行投诉反馈，一经查实，立即处理！

相关文章

  • vue项目之前端CryptoJS加密、解密代码示例

    vue项目之前端CryptoJS加密、解密代码示例

    在Vue项目中集成CryptoJS进行数据加密,首先需要通过npm安装CryptoJS安装包,然后在项目文件中引入CryptoJS,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-11-11
  • Vue动态生成表格的行和列

    Vue动态生成表格的行和列

    这篇文章主要为大家详细介绍了Vue动态生成表格的行和列，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-07-07
  • Vue 响应式系统依赖收集过程原理解析

    Vue 响应式系统依赖收集过程原理解析

    Vue 初始化时就会通过 Object.defineProperty 拦截属性的 getter 和 setter ，为对象的每个值创建一个 dep 并用 Dep.addSub() 来存储该属性值的 watcher 列表，这篇文章主要介绍了Vue 响应式系统依赖收集过程分析,需要的朋友可以参考下
    2022-06-06
  • Vue 3.0 前瞻Vue Function API新特性体验

    Vue 3.0 前瞻Vue Function API新特性体验

    这篇文章主要介绍了Vue 3.0 前瞻Vue Function API新特性体验，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • Vue+Openlayers实现实时坐标点展示

    Vue+Openlayers实现实时坐标点展示

    这篇文章主要为大家详细介绍了Vue+Openlayers实现实时坐标点展示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue elementui el-form rules动态验证的实例代码详解

    vue elementui el-form rules动态验证的实例代码详解

    在使用elementUI el-form 中，对于业务不同的时候可能会产生不同表单结构，但是都是存在同一个表单控件el-form中。这篇文章主要介绍了vue elementui el-form rules动态验证的实例代码,需要的朋友可以参考下
    2019-05-05
  • Vue3 Pinia获取全局状态变量的实现方式

    Vue3 Pinia获取全局状态变量的实现方式

    这篇文章主要介绍了Vue3 Pinia获取全局状态变量的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-05-05
  • vue父组件传值子组件报错Avoid mutating a prop directly解决

    vue父组件传值子组件报错Avoid mutating a prop directly解决

    这篇文章主要为大家介绍了vue父组件传值子组件报错Avoid mutating a prop directly解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • vue3项目使用pinia状态管理器的使用

    vue3项目使用pinia状态管理器的使用

    Pinia是一个专为Vue3设计的现代化状态管理库,本文主要介绍了vue3项目使用pinia状态管理器的使用,具有一定的参考价值,感兴趣的可以了解一下
    2024-05-05
  • Vue中通过vue-router实现命名视图的问题

    Vue中通过vue-router实现命名视图的问题

    这篇文章主要介绍了在Vue中通过vue-router实现命名视图,本文给大家提到了vue-router的原理解析，给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-04-04

最新评论