在vue后臺(tái)管理系統(tǒng)里面，有時(shí)候會(huì)遇到一個(gè)圖片上傳的功能，做這個(gè)功能的時(shí)候的思路是這樣的：
1：首選由前端寫(xiě)一個(gè)圖片上傳的upload標(biāo)簽，選擇本地的圖片文件之后
2:調(diào)用后端給的接口，以二進(jìn)制文件的形式傳給后端服務(wù)器
3:服務(wù)器進(jìn)行處理，處理完成之后將服務(wù)器的主機(jī)名加到圖片名稱(chēng)的前綴上
4:返回一個(gè)有服務(wù)器主機(jī)+圖片名稱(chēng)的在線(xiàn)就可以訪(fǎng)問(wèn)的鏈接給到前端
5:前端直接將在線(xiàn)鏈接路徑渲染在界面顯示圖片

在vue-element-admin里面的具體的實(shí)踐

1:在store/modules里面新建一個(gè)api.js
將上傳圖片至服務(wù)器的后端小伙伴給的接口寫(xiě)在這個(gè)js里面

const baseUrl = 'http://39.xx.xxx.1xx/yyexploreplatform'
const state = {
  fileUpload: baseUrl + '/upload/file'
}

export default { state }

2：打開(kāi)store/getters.js
getters.js

const getters = {
  fileUpload: state => state.api.fileUpload,
}
export default getters

3：新建一個(gè)index.vue頁(yè)面

開(kāi)始寫(xiě)代碼：

<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：有些業(yè)務(wù)需求是這樣的，給定一個(gè)圖片尺寸，比如說(shuō)最大寬度是500，最大高度是300，如果上傳的圖片尺寸超過(guò)這個(gè)范圍，在上傳的時(shí)候，一個(gè)提示，不符合這個(gè)尺寸的都無(wú)法上傳。
這個(gè)時(shí)候，就需要進(jìn)行判斷了

需要在upload里面添加一個(gè):before-upload方法

然后在 methods里面寫(xiě)一下這個(gè)方法的實(shí)現(xiàn)過(guò)程代碼

 //對(duì)圖片大小的限制
    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之內(nèi)！', '提示', {confirmButtonText: '確定'});
                                reject();
                            }
                            if (height >300) {
                                _this.$alert('圖片高度尺寸必須在300之內(nèi)！', '提示', {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: {
    //對(duì)圖片大小的限制
    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之內(nèi)！', '提示', {confirmButtonText: '確定'});
                                reject();
                            }
                            if (height >300) {
                                _this.$alert('圖片高度尺寸必須在300之內(nèi)！', '提示', {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>

如果不符合尺寸的時(shí)候，會(huì)有一個(gè)彈框進(jìn)行提示。