Vue+ElementUI 搭建后台管理系统(实战系列七)

简介: Vue+ElementUI 搭建后台管理系统(实战系列七)

前言

使用ElementUI已经有一段时间了,在一边上手开发后台管理系统的同事,也记录了一些笔记,一直都没有时间将这些零零散散的笔记总结起来,整理成一个比较系统详细一点的教程,可以留着以后来看.


关于开发过程中,确实使用到很大一部分的文档,都说前端开发离不开文档,重要的话说三遍,一定要多看文档。


Vue+ElementUI 搭建后台管理系统(实战系列七)-上传图片的功能

Upload 上传:https://element.eleme.io/#/zh-CN/component/upload


在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方法

使用 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>

如果不符合尺寸的时候,会有一个弹框进行提示。

相关文章
|
2天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之五:Pinia 状态管理
Vue3+Vite+Pinia+Naive后台管理系统搭建之五:Pinia 状态管理
7 1
|
2天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之三:vue-router 的安装和使用
Vue3+Vite+Pinia+Naive后台管理系统搭建之三:vue-router 的安装和使用
6 0
|
2天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之二:scss 的安装和使用
Vue3+Vite+Pinia+Naive后台管理系统搭建之二:scss 的安装和使用
6 0
|
2天前
|
JavaScript 开发工具 git
Vue 入门系列:.env 环境变量
Vue 入门系列:.env 环境变量
8 1
|
2天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之一:基础项目构建
Vue3+Vite+Pinia+Naive后台管理系统搭建之一:基础项目构建
7 1
|
2天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
10 0
|
2天前
|
JavaScript
vue知识点
vue知识点
10 0
|
2天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
3天前
|
JavaScript 数据库
ant design vue日期组件怎么清空 取消默认当天日期
ant design vue日期组件怎么清空 取消默认当天日期
|
3天前
|
JavaScript C++
vue高亮显示组件--转载
vue高亮显示组件--转载
8 0