vue-element-admin怎么实现一个图片上传预览的功能

逃离我推掉我的手 2022-12-19 03:37 137阅读 0赞

在vue后台管理系统里面，有时候会遇到一个图片上传的功能，做这个功能的时候的思路是这样的：  
1：首选由前端写一个图片上传的upload标签，选择本地的图片文件之后  
2:调用后端给的接口，以二进制文件的形式传给后端服务器  
3:服务器进行处理，处理完成之后将服务器的主机名加到图片名称的前缀上  
4:返回一个有服务器主机+图片名称的在线就可以访问的链接给到前端  
5:前端直接将在线链接路径渲染在界面显示图片

在vue-element-admin里面的具体的实践

1:在store/modules里面新建一个api.js  
将上传图片至服务器的后端小伙伴给的接口写在这个js里面

![fc326625389fbee4c22c68cc96bb73fc.png][]

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

![7113e6c3e0127573a1025b371d52c364.png][]

3：新建一个index.vue页面  
![23de731bd527ea017fed311e12122d9c.png][]

开始写代码：

<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:效果如下：

![493019311c60e75980a074acd9a12aa5.gif][]

5：有些业务需求是这样的，给定一个图片尺寸，比如说最大宽度是500，最大高度是300，如果上传的图片尺寸超过这个范围，在上传的时候，一个提示，不符合这个尺寸的都无法上传。  
这个时候，就需要进行判断了

需要在upload里面添加一个:before-upload方法  
![d547b554975a14881c3b58c7fcf5235a.png][]

然后在 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>

如果不符合尺寸的时候，会有一个弹框进行提示。  
![32e17d53a6e55a7ff460e661c244a5db.png][]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]

[fc326625389fbee4c22c68cc96bb73fc.png]: /images/20221120/9564c489546d4669a605df27bbd290b4.png
[7113e6c3e0127573a1025b371d52c364.png]: /images/20221120/60dfd68aa2bd49f18967782288628cfa.png
[23de731bd527ea017fed311e12122d9c.png]: /images/20221120/51e4ebbdec3540edaa7e045b51725329.png
[493019311c60e75980a074acd9a12aa5.gif]: /images/20221120/4900e140951e451ea83d06295df376b3.png
[d547b554975a14881c3b58c7fcf5235a.png]: /images/20221120/dc6ef7e7367b4297a2dde4e273f26cad.png
[32e17d53a6e55a7ff460e661c244a5db.png]: https://img-blog.csdnimg.cn/img_convert/32e17d53a6e55a7ff460e661c244a5db.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201105104642880.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ==,size_16,color_FFFFFF,t_70#pic_center