使用ElementUI el-upload实现一次性上传多个文件
引言
在日常的前端开发中，文件上传是一个非常常见的需求，尤其是在用户需要一次性上传多个文件的场景下。ElementUI作为一款非常优秀的Vue.js 2.0组件库，为我们提供了丰富的UI组件，极大地提升了开发效率。其中，el-upload组件便是一个功能强大且易于使用的文件上传组件。
el-upload组件介绍
el-upload是ElementUI提供的文件上传组件，支持多种文件上传方式，如普通上传、拖拽上传、图片上传等。这个组件不仅能满足单文件上传的需求，还能轻松实现一次性上传多个文件。更重要的是，el-upload组件的API设计非常简洁明了，开发者可以根据自己的需求进行灵活配置。
基本用法
在开始讲解具体实现之前，我们先来看一下el-upload组件的基本用法。以下是一个简单的单文件上传示例：
<template>
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</template>
<script>
export default {
data() {
return {
fileList: []
};
},
methods: {
handlePreview(file) {
console.log(file);
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
submitUpload() {
this.$refs.upload.submit();
}
}
}
</script>
在这个示例中，我们通过el-upload组件实现了一个简单的文件上传功能。action属性指定了文件上传的服务器地址，file-list用于管理已选取的文件列表，on-preview和on-remove则分别用于文件预览和删除的回调。
实现多文件上传
为了实现一次性上传多个文件，我们只需要在el-upload组件中设置multiple属性即可。该属性允许用户在文件选择对话框中一次性选取多个文件。以下是一个多文件上传的示例：
<template>
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
:auto-upload="false"
multiple>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
<div slot="tip" class="el-upload__tip">可以上传多个文件</div>
</el-upload>
</template>
<script>
export default {
data() {
return {
fileList: []
};
},
methods: {
handlePreview(file) {
console.log(file);
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
submitUpload() {
this.$refs.upload.submit();
}
}
}
</script>
在这个示例中，我们添加了multiple属性，使得文件选择对话框允许一次性选择多个文件。这样，用户便可以轻松地实现批量上传。
文件上传的更多配置
el-upload组件不仅支持多文件上传，还提供了丰富的配置项，满足各种文件上传需求。下面我们详细介绍一些常用的配置项：
headers 自定义请求头
在文件上传时，如果需要添加自定义请求头，可以通过headers属性进行配置。以下是一个添加自定义请求头的示例：
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
:headers="{
Authorization: 'Bearer YOUR_TOKEN'
}">
</el-upload>
data 上传附带参数
在文件上传时，如果需要附带一些额外的参数，可以通过data属性进行配置。以下是一个上传时附带额外参数的示例：
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
:data="{
userId: 123
}">
</el-upload>
limit 限制上传文件数量
如果需要限制上传文件的数量，可以通过limit属性进行配置，并结合on-exceed事件进行处理。以下是一个限制最多上传3个文件的示例：
<template>
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:file-list="fileList"
:limit="3"
:on-exceed="handleExceed"
multiple>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
</el-upload>
</template>
<script>
export default {
data() {
return {
fileList: []
};
},
methods: {
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
}
}
}
</script>
before-upload 上传前的钩子
在文件上传之前，如果需要对文件进行一些处理或校验，可以使用before-upload钩子。以下是一个在上传前进行文件大小校验的示例：
<template>
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:before-upload="beforeUpload"
multiple>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
</el-upload>
</template>
<script>
export default {
methods: {
beforeUpload(file) {
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
this.$message.error('上传文件大小不能超过 2MB!');
}
return isLt2M;
}
}
}
</script>
在这个示例中，我们在文件上传前对文件大小进行了校验，如果文件大小超过2MB，则会提示错误信息并阻止上传。
拖拽上传
el-upload组件还支持拖拽上传功能，用户可以通过拖拽文件到指定区域来实现文件上传。以下是一个拖拽上传的示例：
<template>
<el-upload
class="upload-demo"
drag
action="https://jsonplaceholder.typicode.com/posts/"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">支持批量上传</div>
</el-upload>
</template>
在这个示例中，我们通过添加drag属性，使得el-upload组件支持拖拽上传。用户可以将文件拖拽到指定区域，轻松实现文件上传。
自定义上传请求
有时，我们可能需要对上传请求进行更细粒度的控制，例如使用axios等库进行上传。el-upload组件提供了http-request钩子，允许我们自定义上传请求。以下是一个使用axios自定义上传请求的示例：
<template>
<el-upload
class="upload-demo"
:http-request="customRequest"
multiple>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
</el-upload>
</template>
<script>
import axios from 'axios';
export default {
methods: {
customRequest({ file, onProgress, onSuccess, onError }) {
const formData = new FormData();
formData.append('file', file);
axios.post('https://jsonplaceholder.typicode.com/posts/', formData, {
onUploadProgress: (event) => {
let percent = Math.round((event.loaded * 100) / event.total);
onProgress({ percent });
}
}).then(response => {
onSuccess(response.data);
}).catch(error => {
onError(error);
});
}
}
}
</script>
在这个示例中，我们使用axios库自定义了上传请求。通过http-request钩子，我们可以完全控制上传过程，并实现更加灵活的上传逻辑。
小结
ElementUI的el-upload组件为我们提供了强大的文件上传功能，不仅支持单文件上传，还可以轻松实现一次性上传多个文件。通过灵活配置组件的各项属性和钩子函数，我们可以满足各种复杂的文件上传需求。无论是添加自定义请求头、上传附带参数，还是限制上传文件数量、拖拽上传，el-upload组件都能轻松应对。
在日常开发中，我们可以根据实际需求，对el-upload组件进行更深层次的定制和优化，从而提升用户体验和系统性能。希望这篇文章能够帮助大家更好地理解和使用el-upload组件，让文件上传变得更加简单和高效。
以上就是使用ElementUI el-upload实现一次性上传多个文件的详细内容，更多关于ElementUI el-upload上传多个文件的资料请关注脚本之家其它相关文章！
相关文章
vue-types 在 Vue 3 中的使用主要适用于希望进行更细致的 prop 验证的场景,尤其是在 JavaScript 项目中,这篇文章给大家介绍vue3中如何使用vue-types,感兴趣的朋友跟随小编一起看看吧2024-04-04
这篇文章主要为大家介绍了Vue2 this直接获取data和methods原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
我们都知道,轮播图组件模板结构通常是ul包裹li的结构,在vue中,li的数量也通常是由后端接口返回的数据决定,下面这篇文章主要给大家介绍了关于vue3封装轮播图组件功能的相关资料,需要的朋友可以参考下2022-11-11
这篇文章主要为大家详细介绍了Vue实现通知或详情类弹窗，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
小编最近为了优化vue项目性能，需要使用webpack-bundle-analyzer插件来分析报文件，在网上没有找到合适的，下面小编给大家写出来一个供大家参考2019-10-10
这篇文章主要介绍了详解Vue-cli3.X使用px2rem遇到的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
在我们日常开发中经常因为思维定式，我们会犯一些奇怪的错误，有时候看似简单的问题却给出了复杂的解决方案。下面这篇文章主要介绍了vue.js父组件使用外部对象的方法，这个看似简单却绕了一些弯路的问题，有必要和大家分享下，需要的朋友可以参考学习，下面来看看吧。2017-04-04
这篇文章主要介绍了vue自动化路由的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要给大家介绍了关于vue项目中如何使用TypeScript相关配置的相关资料,typescript在开发过程中广泛被应用,在这里总结下项目中ts的应用,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-11-11
当容器有滚动条时,有时需要将指定的内容自动滚动到可视区域,怎么实现呢,下面小编给大家带来了多种方法实现Vue滚动到指定位置,感兴趣的朋友跟随小编一起看看吧2023-08-08
最新评论