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

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

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

前言

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

后台内容在这里

一                、 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
python多线程打开文件(如何使用python线程start和run方法?)