首页IT科技element上传图片到服务器(element-ui实现图片上传功能(前台部分))

element上传图片到服务器(element-ui实现图片上传功能(前台部分))

时间2025-08-03 01:26:35分类IT科技浏览4689
导读:前言 最近做的项目中需要实现图片上传功能,一开始也不懂,经过一段时间的学习后,终于实现了图片上传功能。我将分为前台与后台两部分与大家一起分享。这篇展示的是前台内容。...

前言

最近做的项目中需要实现图片上传功能              ,一开始也不懂                   ,经过一段时间的学习后      ,终于实现了图片上传功能            。我将分为前台与后台两部分与大家一起分享                    。这篇展示的是前台内容       。

后台内容在这里

一              、 template 部分

这里我使用的是用户头像上传的组件

<el-form-item prop="logoUrl" label="企业头像" :label-width="dialogFormLabelWidth"> <el-upload class="avatar-uploader " :action="uploadImgUrl" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :on-error="handleUploadError" :headers="headers"> <img v-if="ruleForm.logoUrl" :src="ruleForm.logoUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </el-form-item>

1.参数说明

action :上传图片的后台controller的地址

show-file-list:是否显示已上传文件列表

on-success:文件上传成功时的钩子

before-upload :上传文件之前的钩子          ,参数为上传的文件                    ,若返回 false 或者返回 Promise 且被 reject         ,则停止上传         。

on-error:文件上传失败时的钩子

headers:上传图片的请求头部

二                   、script部分

1      、导入token

getToken函数定义在了auth.js模块中:

export:用于向其余模块提供代码                   。

2          、在data中注册以下

ruleForm:{ logoUrl:"",//logo }, headers: { Authorization: "Bearer " + getToken(), }, uploadImgUrl: "/v1/enterprise/upload", // 上传图片的后台controller的地址 dialogFormLabelWidth: 120px,

3                    、method中的方法

handleAvatarSuccess(res) { this.ruleForm.logoUrl=res.data.url; this.$message({ message: 图片上传成功, type: success }); beforeAvatarUpload() { const isJPG = file.type === image/jpeg; const isLt20M = file.size / 1024 / 1024 < 20; if (!isJPG) { this.$message.error(上传头像图片只能是 JPG 格式!); } if (!isLt20M) { this.$message.error(上传头像图片大小不能超过 20MB!); } return isJPG && isLt20M; }, handleUploadError() { this.$message({ type: "error", message: "上传失败", }); },

4         、style

<style> .avatar-uploader .el-upload { border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; } .avatar-uploader .el-upload:hover { border-color: #409EFF; } .avatar-uploader-icon { font-size: 28px; color: #8c939d; width: 178px; height: 178px; line-height: 178px; text-align: center; } .avatar { width: 178px; height: 178px; display: block; } </style>

若上传成功的话      ,会传给后台该图片的二进制文件           。

声明:本站所有文章                    ,如无特殊说明或标注            ,均为本站原创发布      。任何个人或组织   ,在未征得本站同意时                    ,禁止复制      、盗用                    、采集            、发布本站内容到任何网站   、书籍等各类媒体平台                  。如若本站内容侵犯了原著者的合法权益               ,可联系我们进行处理              。

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
免费写作神器 自动生成(探索文章生成器网站的神奇魅力) SEO优化技巧(提高网站的SEO排名)