vue-element-admin上传图片的功能
时间:2022-07-23
本文章向大家介绍vue-element-admin上传图片的功能,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在vue后台管理系统里面,有时候会遇到一个图片上传的功能,做这个功能的时候的思路是这样的: 1:首选由前端写一个图片上传的upload标签,选择本地的图片文件之后 2:调用后端给的接口,以二进制文件的形式传给后端服务器 3:服务器进行处理,处理完成之后将服务器的主机名加到图片名称的前缀上 4:返回一个有服务器主机+图片名称的在线就可以访问的链接给到前端 5:前端直接将在线链接路径渲染在界面显示图片
在vue-element-admin里面的具体的实践
1:在store/modules里面新建一个api.js 将上传图片至服务器的后端小伙伴给的接口写在这个js里面
const baseUrl = 'http://39.xx.xxx.1xx/yyexploreplatform'
const state = {
fileUpload: baseUrl + '/upload/file'
}
export default { state }
2:打开store/getters.js getters.js
const getters = {
fileUpload: state => state.api.fileUpload,
}
export default getters
3:新建一个index.vue页面
开始写代码:
<template>
<div class="app-container">
<el-form ref="nextProjectForm" :model="nextProjectForm" label-width="100px">
<el-form-item label="插入图片">
<el-upload
class="avatar-uploader"
:action="fileUpload"
:headers="{ Authorization: token }"
:show-file-list="false"
:on-success="handleAvatarSuccess">
<img
v-if="nextProjectForm.publicWelfareUrl"
:src="nextProjectForm.publicWelfareUrl"
class="avatar"/>
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
data() {
return {
nextProjectForm: {
publicWelfareUrl: "",
},
};
},
computed: {
...mapGetters(["fileUpload", "token"])
},
methods: {
handleAvatarSuccess(response, file, fileList) {
if (response && response.data && response.data.url) {
this.$set(this.nextProjectForm, "publicWelfareUrl", response.data.url);
}
},
}
};
</script>
<style lang='scss'>
.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>
4:效果如下:
5:有些业务需求是这样的,给定一个图片尺寸,比如说最大宽度是500,最大高度是300,如果上传的图片尺寸超过这个范围,在上传的时候,一个提示,不符合这个尺寸的都无法上传。 这个时候,就需要进行判断了
需要在upload里面添加一个:before-upload方法
然后在 methods里面写一下这个方法的实现过程代码
//对图片大小的限制
handleImagesUrlBefore:function(file){
var _this = this;
return new Promise(function(resolve, reject) {
var reader = new FileReader();
reader.onload = function(event) {
var image = new Image();
image.onload = function () {
var width = this.width;
var height = this.height;
if (width>500 ){
_this.$alert('图片宽度尺寸必须在500之内!', '提示', {confirmButtonText: '确定'});
reject();
}
if (height >300) {
_this.$alert('图片高度尺寸必须在300之内!', '提示', {confirmButtonText: '确定'});
reject();
}
resolve();
};
image.src = event.target.result;
}
reader.readAsDataURL(file);
});
},
完整的参考代码:
<template>
<div class="app-container">
<el-form ref="nextProjectForm" :model="nextProjectForm" label-width="100px">
<el-form-item label="插入图片">
<el-upload
class="avatar-uploader"
:action="fileUpload"
:before-upload="handleImagesUrlBefore"
:headers="{ Authorization: token }"
:show-file-list="false"
:on-success="handleAvatarSuccess">
<img
v-if="nextProjectForm.publicWelfareUrl"
:src="nextProjectForm.publicWelfareUrl"
class="avatar"/>
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
data() {
return {
nextProjectForm: {
publicWelfareUrl: "",
},
};
},
computed: {
...mapGetters(["fileUpload", "token"])
},
methods: {
//对图片大小的限制
handleImagesUrlBefore:function(file){
var _this = this;
return new Promise(function(resolve, reject) {
var reader = new FileReader();
reader.onload = function(event) {
var image = new Image();
image.onload = function () {
var width = this.width;
var height = this.height;
if (width>500 ){
_this.$alert('图片宽度尺寸必须在500之内!', '提示', {confirmButtonText: '确定'});
reject();
}
if (height >300) {
_this.$alert('图片高度尺寸必须在300之内!', '提示', {confirmButtonText: '确定'});
reject();
}
resolve();
};
image.src = event.target.result;
}
reader.readAsDataURL(file);
});
},
handleAvatarSuccess(response, file, fileList) {
if (response && response.data && response.data.url) {
this.$set(this.nextProjectForm, "publicWelfareUrl", response.data.url);
}
},
}
};
</script>
<style lang='scss'>
.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>
如果不符合尺寸的时候,会有一个弹框进行提示。
- 我的第二个网页制作:p,hn,br标签的使用
- 超级账本项目:架构设计
- 我的第四个网页制作:列表标签
- “盛大游戏杯”第15届上海大学程序设计联赛夏季赛暨上海高校金马五校赛题解&&源码【A,水,B,水,C,水,D,快速幂,E,优先队列,F,暴力,G,贪心+排序,H,STL乱搞,I,尼姆博弈,J,差分dp
- 虎嗅主站盲打成功(已进后台)
- 我的第五个网页制作:pre、html转义、abbr标签的使用
- UVALive 3882 - And Then There Was One【约瑟夫问题】
- 超级账本项目:链码示例
- 我的第六个网页制作:table标签
- POJ 1163 The Triangle【dp+杨辉三角加强版(递归)】
- UVA 11039-Building designing【贪心+绝对值排序】 UVA11039-Building designing
- UVA 11636-Hello World!(水题,猜结论) UVA11636-Hello World!
- 百度某SDK设计缺陷导致手机敏感信息泄露(IMEI号和地理位置信息等)
- HDU 1004 Let the Balloon Rise【STL<map>】
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法