iViewUI+Axios+Laravel实现一次性同时上传多个文件

iViewUI 的上传组件 Upload 默认基本用法是一次选择一个文件。

然而有很多场景是需要一次选择多个文件上传的，当然 iViewUI 也是支持多个文件上传，只要加上 multiple 属性即可。

不过这个 multiple 属性并不是它的创造发明，因为 Upload 组件是基于原生的 input 标签，而 input 就是用的 multple ，因此只要简单地加上 multiple 属性就可以支持多文件上传了。

如下，原生的 input 标签就支持多文件同时浏览上传。

<input id="upload" type="file" multiple>
 

对于 iViewUI 也是一样的。

<Upload
    multiple
    action="//sysadm.cc/posts/">
    <Button icon="ios-cloud-upload-outline">Upload files</Button>
</Upload>
 

好了，你可以试一下，原先只能选择单个文件，现在加了 multiple 属性后的确可以选择多个文件。

不过选择是可以选择了，只是它是如何触发上传这个动作的呢？

其实也挺简单的，加个 onchange 方法就行了。

<input id="upload" type="file" multiple onchange="uploadFile(value)">
 

如下 uploadFile 方法可以获取到待上传文件的信息，包括文件名和路径。

<script>
    function uploadFile(value) {
        // 获取上传控件dom
        var upload = document.getElementById('upload');

        // 获取文件名
        var fileName = upload.files[0].name;

        // 获取文件完全路径
        var filePath = upload.value;
    }
</script>
 

我们可以通过 upload.files 来查看或操作文件信息。

不过这只是原生 input 上传的用法，既然我们用到的 iViewUI ，那么用 iViewUI 又如何实现获取文件信息呢？

针对这个问题， iViewUI 的 Upload 组件就有一个名为 before-upload 的方法可以实现我们想要的功能。

在正式提交上传文件之前，这个方法会被触发，同时也会获取到文件信息。

但是吧，可能用过 iViewUI 的小伙伴会有体会，当我们选择并上传多个文件时，这个 before-upload 方法会单纯轮循多次，而不是一次性获取多个文件信息。

换句话说，就是你要同时上传两个文件，结果它却给你跑了两次，获取到的信息居然只有最后那个文件的！

这可怎么办呢？

我在网上查了很多相关资料，不是过时的就是无法真正地实现多文件上传功能。

后来经过研究测试，最后终于搞定了。

大体实现的方法是：

• 通过人为设定一个数组变量用于存放多文件信息
• 然后再通过 before-upload 方法，每获取到文件就放到数组变量中
• 最后就简单了，将文件信息添加到 formData 对象接口中，使用 Axios 提交即可。

环境配置及对应程序版本：

• Vue.js - 2.5.16
• iviewUI - 4.5.x
• Axios - 0.18.0
• PHP - 8.1
• Laravel - 10.7.1

最终实现功能：

• 支持多个文件上传
• 可列出哪些等待上传的文件
• 可删除列表中待上传的文件
• 除文件上传外还可同步提交其他参数

上传文件效果图。

部分演示代码。

完整代码我就不打包了，可在文章中直接查看。

iViewUI+Axios+Laravel实现一次性同时上传多个文件完整源代码

<关注公众号，发送001029>

前端写法

上传组件代码，支持多文件上传、文件格式过滤、实时列出上传文件等等功能。

<Upload
    ref="upload"
......
</Upload>
 

上传文件所需的变量定义。

// 上传组件所需要的变量
loadingStatus: false, // 上传状态
......
uploaddisabled: false, // 是否禁用上传
 

上传组件使用到的方法函数。

// 正提交上传文件
uploadstart () {
    this.loadingStatus = true;
    let formData = new FormData()
......
},
 

后端写法

在 Laravel 控制器中实现获取多文件信息，包括文件的原始名称、路径、扩展名等等。

/**
* 后端上传文件演示
*/
public function getUploadFile(Request $request)
{
......
}
 

iViewUI+Axios+Laravel实现一次性同时上传多个文件完整源代码

<关注公众号，发送001029>

将技术融入生活，打造有趣之故事

网管小贾 / sysadm.cc