el-upload組件二次封裝

注釋：
1.limit可上傳圖片數(shù)量
2.lableName當(dāng)前組件name，用于一個頁面多次使用上傳組件，對數(shù)據(jù)進(jìn)行區(qū)分
3.upload上傳圖片發(fā)生變化觸發(fā)，返回已上傳圖片的信息
4.imgUrl默認(rèn)圖片文章來源地址http://www.zghlxwxcb.cn/news/detail-512278.html

<template>
  <div class="uploadimg " :style="{marginLeft: marginLeft, }">
    <el-upload
    action="false"
    :class="isAddImg ? 'disabled' : ''"
    accept="image/png,image/gif,image/jpg,image/jpeg"
    :limit="limit"
    :with-credentials="true"
    :multiple="false"
    list-type="picture-card"
    :before-upload="beforeUpload"
    :file-list="fileList"
    :http-request="httpRequest"
    :on-preview="handlePictureCardPreview"
    :on-remove="onRemove"
    >
      <div class="uploadIco">
        <i class="el-icon-plus" ></i>
        <div class="text">{{uploadType}}</div>
      </div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible1" width="600px" append-to-body class="uploadimgDialog" >
      <img width="100%" :src="dialogImageUrl" />
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    limit: {
      type: Number,
      default: 1,
    },
    imgUrl: {
      type: String,
      required:true,
    },
    lableName: {
      type: String,
      default: '',
    },
    uploadType:{
      type: String,
       default: '上傳圖片',
    },
    marginLeft:{
      type: String,
       default: '0px',
    }
  },
  data() {
    return {
      fileArr:[],
      fileList: [],
      isRemove: false, // 用于編輯時是否上傳了圖標(biāo)
      dialogVisible1: false,
      dialogImageUrl: "",
    };
  },
  computed:{
    isAddImg(){
      if(this.limit == this.fileArr.length){
          return true
      }else{
          return false
      }
    },
  },
  watch:{
    imgUrl:{
      immediate: true,
      deep: true,
      handler(val,oldVal){
        if(val!=''){
          this.dialogImageUrl = val;
          this.fileList = [{ url: val }];
          this.fileArr = [{ url: val }];
        }else{
          this.dialogImageUrl = '';
          this.fileList = [];
        }
      },
    },
  },
  methods: {

    //限制圖片格式及大小
    beforeUpload(file) {
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/jpg" ||
        file.type === "image/gif";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$Message.error("上傳圖片只能是 png、gif、jpeg、jpg 格式!");
      } else if (!isLt2M) {
        this.$Message.error("上傳圖片大小不能超過 2MB!");
      }
      return isJPG && isLt2M;
    },

    //上傳后獲取文件流
    async httpRequest(file) {
      this.fileArr.push(file.file)
      this.$emit("upload", { fileArr:this.fileArr , type:'add',lableName:this.lableName });
    },

    //預(yù)覽
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible1 = true;
    },

    //刪除
    onRemove(file, fileList) {
      let arr = []
      fileList.forEach((item)=>{
        if(item.raw){
          arr.push(item.raw)
        }else{
          arr.push(item)
        }
      });
      this.fileArr = arr;
      this.$emit("upload", { fileArr:this.fileArr , type:'del',lableName:this.lableName });
    },
  },
};
</script>
<style lang="scss" scoped>
.uploadimg{
  .uploadIco {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    line-height: 17px !important;
  }
}
::v-deep .disabled .el-upload{
  display: none;
}
</style>

組件使用

<template>
  <div>
    <UploadImg
    :limit="2"
    :lableName="'authorizationLetter'"
    @upload='receiveFile'
    :imgUrl='ruleForm.imgUrl' />
  </div>
</template>

<script>
export default {
  data(){
    return {
      ruleForm:{
        imgUrl:'',
      }
    }
  },
  components: {
      UploadImg: () => import("./component/UploadImg.vue"),
  },
  methods:{
    receiveFile(data){
      //如果設(shè)置了默認(rèn)圖片請注意data返回值
      //data返回值是一個數(shù)組，數(shù)組中如果設(shè)置了默認(rèn)值data返回的數(shù)據(jù)會存在對象和文件流兩種數(shù)據(jù)類型
      //如果數(shù)據(jù)中存在name就是一個文件流，如果沒有就是設(shè)置的默認(rèn)值的數(shù)據(jù)
      console.log("data",data)
    },
  }
}
</script>

到了這里，關(guān)于vue Element ui上傳組件el-upload封裝的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！