el-upload是ElementUI提供的文件上传组件，支持多种文件上传方式，如普通上传、拖拽上传、图片上传等。这个组件不仅能满足单文件上传的需求，还能轻松实现一次性上传多个文件。更重要的是，el-upload组件的API设计非常简洁明了，开发者可以根据自己的需求进行灵活配置。
基础实例
我们通过el-upload组件实现了一个简单的文件上传功能。action属性指定了文件上传的服务器地址，file-list用于管理已选取的文件列表，on-preview和on-remove则分别用于文件预览和删除的回调。
<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组件中设置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>文件上传的更多配置
- headers 自定义请求头
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
:headers="{
Authorization: 'Bearer YOUR_TOKEN'
}">
</el-upload>- data 上传附带参数
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
:data="{
userId: 123
}">
</el-upload>- limit 限制上传文件数量
<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 上传前的钩子
<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>- 拖拽上传
<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>- 自定义上传请求
<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>
