vue头像上传组件,vue怎么去做上传图片功能
本文主要详细介绍vue的头像上传功能。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享vue上传头像的具体代码，供大家参考。具体如下。
1.创建一个项目并使用vue-admin-template框架。
2.使用vue命令在终端(开发工具VScode)进入npm install，可以下载为package.json文件。
3.导入相关工具包，这是上传头像比较好的方法。
4.在视图中写入vue文件
模板
div class=应用程序容器
El-form-item label=演讲者肖像
El-上传
:show-file-list=true
:on-success= handleAvatarSuccess
:on-error=handleAvatarError
:before-upload= beforeAvatarUpload
class=头像上传者
:action= BASE _ API /eduOss/fileOss
img v-if=老师.头像:src=老师.头像
I v-else class= El-icon-plus avatar-uploader-icon /
/El-上传
/El-表单-项目
span style= margin-left:8.7%；字体大小：20px font-weight:400；*单击图片框修改头像*/span
br /br /br /
El-表单-项目
El-button:disabled= savet disabled plain= true type= primary @ click= saveourupdate save/El-button
/El-表单-项目
/el格式
/div
/模板
脚本
//介绍上传头像的功能组件
从“@/components/ImageCropper”导入ImageCropper
从“@/components/PanThumb”导入PanThumb
导出默认值{
组件：{imagecropper，pantomb}，//组件的声明
data() {
返回{
}，//v模型双向绑定
ImagecropperShow: false，//是否显示上传项目符号框组件？
ImagecropperKey: 0，//上传组件的唯一ID
Base _ API: process.env.base _ API，//获取dev.env.js中的地址
savebndisabled:false//“保存”按钮是否被禁用？
}
},
Created() {//在呈现页面之前执行
},
手表：{//vue的监控
$route(to，from) {//路由更改模式，路由一更改就执行该方法。
this.init()
}
},
方法：{
//文件上传成功。
handleAvatarSuccess(响应){
if (response.success) {
this . teacher . avatar=response . data . URL
//strong制重新呈现
这个。$forceUpdate()
}否则{
这个。$message.error(上传失败！(不是20000))
}
},
//文件上传失败(http)
handleAvatarError() {
这个。$message.error(上传失败！(http失败))
},
//上传验证
beforeAvatarUpload(文件){
const is jpg=file . type=== image/JPEG
const isLt3M=file . size/1024/1024 3
如果(！isJPG) {
这个。$message.error(上传头像图片只能是JPG格式！)
}
如果(！isLt3M) {
这个。$message.error(上传的头像图片大小不能超过2MB！)
}
return isJPG isLt3M
},
}
}
/脚本
风格。头像上传者。El-上传{
边框：1px虚线# d9d9d9
边框-半径：6px
光标：指针；
位置：相对；
溢出：隐藏；
}。头像上传者。El-上传：悬停{
边框颜色：# 409EFF
}。头像上传者。头像-上传者-图标{
字体大小：28px
颜色：# 8c939d
宽度：178px
身高：178px
行高：178px
文本对齐：居中；
}。头像上传者img {
宽度：178px
身高：178px
显示：块；
}
/风格
这个代码是上传文件头像的前端代码的片段、样式和上传功能。上传到阿里云服务器时，还需要连接后端功能。比如添加的时候，后端会把上传文件的url拼成一个字符串，保存在数据库里。在前端，需要编写相关的保存函数，连接后端，将保存的数据写入data，将保存的方法写入methods。此代码可以通过添加个人代码来修改。
使用环境是node.js
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。