elementui使用el-upload组件实现自定义上传的详细步骤
一、问题描述
elmentui 中的upload默认的提交行为是通过 action 属性中输入的 url 链接，提交到指定的服务器上。但是这种url提交文件的方式，在实际的项目环境中往往是不可取的。
我们的服务器会拦截所有的请求，进行权限控制，密钥检查，请求头分析等安全行为控制。写在这里的url无法实现定义请求参数之类的，就更不能进行后面的操作了。
所以最恰当的方式，就是自定义文件的上传行为。
二、实现方式
el-upload 中有一个属性 http-request ，官方的描述是说 覆盖默认的上传行为，可以自定义上传的实现，类型是 function，可选值与默认值都省略。经过我的探索，我发现它可以接收一个参数，这个参数保存了你文件上传的对象。绑定的方法，会在【文件上传】事件触发后再触发。比如说，你先选择文件，点击【上传】按钮，触发上传事件，才会触发到 http-request 中绑定的函数。
三、实现步骤
先定义了一个 el-upload标签，在里面先把自动上传文件关闭，由于action是必填项，所以就塞了个#进去，在http-request 中绑定了我自定义的 handleFileUpload 函数。在这个函数里面，我实现了自定义文件上传的请求。里面的button，用来上传文件的。
3.1 方式一：选择后自动上传
利用 before-upload 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject ，则停止上传
template部分代码如下：
<el-upload
class="upload-demo"
action="#"
ref="upload"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="3"
:on-exceed="handleExceed"
:file-list="fileList"
:http-request="handleFileUpload"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处，或 <em>点击选取</em>
</div>
</el-upload>
js代码如下：
data(){
return {
loading = false,
fileList: [], //深拷贝，判断重名及第一步时的文件信息展示
};
}
methods: {
// 处理移除操作
handleRemove(file, fileList) {
console.log(file, fileList);
},
// 处理预览操作
handlePreview(file) {
console.log(file);
},
// 处理超出图片个数操作
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
},
// 移除之前的操作
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }？`);
},
// 处理文件上传操作
handleFileUpload(file) {
this.loading = true;
// 调用后端服务器的接口
uploadFile(file.file).then((resp) => {
this.form.installImgUrl = resp.url;
}).catch((e) => {
this.$message.error(e.message);
this.$refs.upload.clearFiles();
})
}
}
handleFileUpload(file) 函数入参 file 实际结果如下图所示：
而后端服务器接受的是 file 实体，所以 传入后端的参数取值是 file.file。
来到 handleFileUpload(file) 函数中，用xhr接收文件上传对象。新建一个FormData对象，将数据封装到FormData中并提交到服务器，这和在页面新建一个表单，然后提交表单是同一样的。
如果不想上传成功后显示上传文件列表，可以隐藏掉文件列表
可以在组件中设置 :show-file-list=“false”
或者
::v-deep .el-upload-list {
display: none !important;
}
3.2 方式二：选择图片后手动上传
其实选择图片后手动上传，只需要在 el-upload 组件中添加如下 :auto-upload=“false” 属性即可。可在 element官网 组件中 Upload 上传 查看。
然后再添加一个手动上传的函数即可。比如下面的的 submitUpload() 函数
template代码如下所示：
<el-upload
class="upload-demo"
action="#"
ref="upload"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="3"
:auto-upload="false"
:on-exceed="handleExceed"
:file-list="fileList"
:http-request="handleFileUpload"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处，或 <em>点击选取</em>
</div>
</el-upload>
<div class="upload-btn">
<el-button type="primary" @click="submitUpload" :loading="loading">确 定</el-button>
</div>
js代码如下：
data(){
return {
loading = false,
fileList: [], //深拷贝，判断重名及第一步时的文件信息展示
};
}
methods: {
// 处理移除操作
handleRemove(file, fileList) {
console.log(file, fileList);
},
// 处理预览操作
handlePreview(file) {
console.log(file);
},
// 处理超出图片个数操作
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
},
// 移除之前的操作
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }？`);
},
// 处理文件上传操作
handleFileUpload(file) {
this.loading = true;
// 调用后端服务器的接口
uploadFile(file.file).then((resp) => {
this.form.installImgUrl = resp.url;
}).catch((e) => {
this.$message.error(e.message);
this.$refs.upload.clearFiles();
})
},
submitUpload() {
this.$refs.upload.submit();
}
}
3.3 拓展：上传文件夹
使用 el-upload 组件上传整个文件夹。
只需要为 input 输入框设置 webkitdirectory 属性
mounted() {
if (this.$route.query.type === 'folder') {
this.$nextTick(() => {
document.querySelector('.el-upload__input').webkitdirectory = true
})
}
},
四、服务器相关接口
Controller 接口如下：
以下是工具类中的相关函数
FileServerUtil.upload() 函数如下：
FileServerUtil.getContentType() 函数如下：
FileServerUtil.isImage() 函数如下：
总结
到此这篇关于elementui使用el-upload组件实现自定义上传的文章就介绍到这了,更多相关elementui自定义上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue顶部菜单栏实现小结,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
这篇文章主要介绍了Vue中引入样式文件的方法,需要的朋友可以参考下2017-08-08
这篇文章主要给大家介绍了关于vue中路由参数传递遇到的坑的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2017-12-12
这篇文章主要为大家详细介绍了vue3.0之Router的使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
本篇文章主要介绍了详解vue嵌套路由-query传递参数，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
这篇文章主要为大家详细介绍了使用Vue3封装一个通用echarts组件详解的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-02-02
本文主要介绍了浅谈Vue+Ant Design form表单的一些坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
这篇文章主要介绍了Vue.js 实现地址管理页面的思路(地址添加、编辑、删除和设置默认地址),本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-12-12
这篇文章主要介绍了vue 出现data-v-xxx的原因及解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
vue-cli脚手架模板是基于node下的npm来完成安装，这篇文章主要介绍了vue-cli脚手架的安装教程图解 ,需要的朋友可以参考下2018-09-09
最新评论