element

2023-07-30 08:49| 来源: 网络整理| 查看: 265

文章目录 element-upload 自定义上传、限制文件大小、格式以及图片尺寸1. 前言2. 完整实现示例

element-upload 自定义上传、限制文件大小、格式以及图片尺寸 1. 前言

前段时间业务上有个需求是前端上传 png 格式 100kb 以内并且尺寸为 80px * 50px 的图片，同时在上传的同时需要携带用户的个人信息以及其他额外信息。

因此在 element-upload 基础之上，实现这个需求需要在上传前检查图片的大小，格式以及尺寸，同时，需要自定义上传而不是使用组件的 action 上传方式，因为需要携带额外参数。

2. 完整实现示例上传到服务器 export default { data() { return { hideUploadEdit: false, // 隐藏'上传按钮' limitNum: 1, // 图片数量 fileList: [] // 图片列表 }; }, methods: { handleEditChange(file, fileList) { this.hideUploadEdit = fileList.length >= this.limitNum; console.log("this.fileList:", this.fileList); console.log("this.hideUploadEdit:", this.hideUploadEdit); }, uploadPreview(file) { const isPNG = /^.png$/.test(file.name.substring(file.name.lastIndexOf('.'))); const isLt100KB = file.size / 1024 this.$message.error("上传图片大小不能超过 80KB!"); return false; }; let is80x56 = true; const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = (theFile) => { const image = new Image(); image.src = theFile.target.result; image.onload = () => { const { width, height } = image; if(width !== 80 || height !== 56) { this.$message.error("请上传 80*56 px 的图片！"); is80x56 = false; }; }; }; return isPNG && isLt100KB && is80x56; }, handleRemove(file, fileList) { if (fileList.length === 0) { this.fileList = []; } else { let dl = this.fileList.indexOf(file); this.fileList.splice(dl, 1); } this.hideUploadEdit = fileList.length >= this.limitNum; }, uploadPreview(file) { const isPNG = /^.png$/.test(file.name.substring(file.name.lastIndexOf('.'))); const isLt100KB = file.size / 1024 this.$message.error("上传图片大小不能超过 80KB!"); return false; }; let is80x56 = true; const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = (theFile) => { const image = new Image(); image.src = theFile.target.result; image.onload = () => { const { width, height } = image; if(width !== 80 || height !== 56) { this.$message.error("请上传 80*56 px 的图片！"); is80x56 = false; }; }; }; return isPNG && isLt100KB && is80x56; }, handleUpload(param) { this.param = param; // 这里可以进行上传 // let formData = new FormData(); //formdata格式 // formData.append("fileName", this.param.file); // 将formData 作为 body 上传即可，有额外的参数可携带 }, submitUpload() { if (!this.param) { this.$message("请选择图片"); } else { let formData = new FormData(); //formdata格式 formData.append("file", this.param.file); // 也可以在这里进行上传 // let formData = new FormData(); //formdata格式 // formData.append("fileName", this.param.file); // 将formData 作为 body 上传即可，有额外的参数可携带 } }, } }; .hide .el-upload--picture-card { display: none; } .el-upload-list__item { transition: none !important; }

【本文地址】

公司简介

联系我们