vue-element-admin上传图片的功能,限制图片大小-:before-upload=“handleImagesUrlBefore“

悠悠 2022-09-05 04:09 178阅读 0赞

##### 写在前面的而一些啰嗦的话: #####

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。

Star指数：69.7k  
Github 地址：[https://github.com/PanJiaChen/vue-element-admin][https_github.com_PanJiaChen_vue-element-admin]  
Demo体验：[https://panjiachen.github.io/vue-element-admin/\#/dashboard][https_panjiachen.github.io_vue-element-admin_dashboard]  
官方文档：[https://panjiachen.github.io/vue-element-admin-site/zh/][https_panjiachen.github.io_vue-element-admin-site_zh]

使用建议  
本项目的定位是后台集成方案，不太适合当基础模板来进行二次开发。因为本项目集成了很多你可能用不到的功能，会造成不少的代码冗余。如果你的项目不关注这方面的问题，也可以直接基于它进行二次开发。

![c7ae520a2ca45b730b215d94f25b2758.png][]

--------------------

##### 推荐使用，简化版 #####

使用一下饿了么简化版后台管理系统-eladmin-web  
Github地址：[https://github.com/elunez/eladmin-web][https_github.com_elunez_eladmin-web]

##### 测试使用demo #####

test.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"
                  :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>
    
            <el-button type="primary" @click="createData()">确定</el-button>
    
      </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);
          }
    
          this.nextProjectForm.publicWelfareUrl=response.data
        },
    
    
         //添加
        async createData() {
          const params = this.nextProjectForm;
          alert(JSON.stringify(params));
        },
    
       
      }
    };
    </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>

![97c12e4cadc6da48d97ac6438462d1c8.png][]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]

[https_github.com_PanJiaChen_vue-element-admin]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FPanJiaChen%2Fvue-element-admin
[https_panjiachen.github.io_vue-element-admin_dashboard]: https://links.jianshu.com/go?to=https%3A%2F%2Fpanjiachen.github.io%2Fvue-element-admin%2F%23%2Fdashboard
[https_panjiachen.github.io_vue-element-admin-site_zh]: https://links.jianshu.com/go?to=https%3A%2F%2Fpanjiachen.github.io%2Fvue-element-admin-site%2Fzh%2F
[c7ae520a2ca45b730b215d94f25b2758.png]: /images/20220829/fc5746ab0e634bb697be029acbb3806e.png
[https_github.com_elunez_eladmin-web]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Felunez%2Feladmin-web
[97c12e4cadc6da48d97ac6438462d1c8.png]: https://img-blog.csdnimg.cn/img_convert/97c12e4cadc6da48d97ac6438462d1c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/dece1332394a4ff49fa46736b4ceda30.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ==,size_16,color_FFFFFF,t_70