VUE的Element组件上传文件el

2023-08-07 14:59| 来源: 网络整理| 查看: 265

在这里插入图片描述

在业务场景中，我们经常会接到上传文件的需求，Element的上传组件就做的很完善，今天就用这个组件库来介绍:

第一种：自动上传

. 当我们设置了action的值，那文件就会默认上传到这个地址。

action="https://jsonplaceholder.typicode.com/posts/"

在这里插入图片描述

添加图片第二种：手动上传

在这里插入图片描述

选取文件上传到服务器第三种：自定义上传选取文件上传到服务器

设置自定义上传

// 点击上传 submitUpload() { this.$refs.upload.submit(); }， // 调上传接口 async imgUpload (info) { const { file } = info this.file = file let formData = new FormData() formData.append('file', file) // 调用上传接口 try { // 调上传接口 const data = await api.uploadImg(formData) } catch (error) { } }, 参数说明action上传的地址multiple是否支持多选文件http-request覆盖默认的上传行为，可以自定义上传的实现list-type文件列表的类型accept文件格式的，默认是支持任意格式limit上传文件的个数file-list上传的文件列表on-remove移除文件时的钩子on-exceed文件超出个数要求后的钩子on-success上传成功的钩子on-error上传失败的钩子before-upload上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。before-remove删除文件之前的钩子submit手动上传文件列表

下面内容为限制文件格式和大小的操作：上传组件一般的有以下几点要求：文件格式、大小、数量等。

// 上传前 beforeUpload(file) { var testmsg=file.name.substring(file.name.lastIndexOf('.')+1) // 限制上传格式为图片 // const isIMAGE = file.type === 'image/jpeg'||'image/gif'||'image/png'; const extension = testmsg === 'xls' || 'xlsx' const isLt2M = file.size / 1024 / 1024 message: '上传文件只能是 xls、xlsx格式!', type: 'warning' }); } if(!isLt2M) { this.$message({ message: '上传文件大小不能超过 10MB!', type: 'warning' }); } return extension && isLt2M }

手动上传：

submitUpload() { this.$refs.upload.submit(); }

上传成功：

//上传成功 uploadSuccess(response,file,fileList){ if(response.code==200){ //状态码为200时则上传成功 }else{ //状态码不是200时上传失败从列表中删除 fileList.splice(fileList.indexOf(file),1); } },

移除文件钩子

// 移除文件钩子 handleRemove(file, fileList) { console.log(file, fileList); },

禁止删除：

//禁止删除 beforeRemove(){ return false; },

超过限制数量

// 超过限制数量 handleExceed(files, fileList) { this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`); }

上传失败：

//上传失败 error(response, file, fileList){ console.log('上传失败') },

以上就是常见的几种上传，如有疑问，请留言!

【本文地址】

公司简介

联系我们