一看就会；vue实现图片上传回显及修改（element-ui限制一张图片上传，没有图片显示+号，有图片显示图片隐藏+号）

需求：

1.单独封装element-UI的upload文件上传组件；

2.组件完成上传、回显、修改功能；

3.没有图片时，显示上传的+号，有图片时隐藏上传的+号；

效果：

 

单独封装element-ui里面的upload组件并在父组件中使用(在这里我们每次只能上传一张照片，后面选择的图片会替换掉前面的)：

父组件：

 代码：

<el-dialog :title="addProTypeTitList[addProTypeTitIndex]" :visible.sync="diaAddProType" center width="400px">
      <el-form :model="addProType" :rules="rules" ref="makeFromRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="标题" prop="title">
          <el-input clearable v-model="addProType.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="热销权重" prop="hotWeight">
          <el-input clearable v-model="addProType.hotWeight" placeholder="请输入热销权重"></el-input>
        </el-form-item>
        <el-form-item label="品类图标" prop="icon">
          <UpLoadFile v-model="addProType.icon"></UpLoadFile>

        </el-form-item>
        <!-- <el-form-item v-if="addProTypeTitIndex==='2'" label="是否主类" prop="isMain">
          <el-select style="width:100%" clearable v-model="addProType.isMain" placeholder="选择是否主类">
            <el-option label="是" value="1"> </el-option>
            <el-option label="否" value="0"> </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="是否认证" prop="isAttestation">
          <el-select :disabled="retDisable()" style="width:100%" clearable v-model="addProType.isAttestation"
            placeholder="选择是否认证">
            <el-option label="是" value="1"> </el-option>
            <el-option label="否" value="0"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否启用" prop="status">
          <el-select style="width:100%" clearable v-model="addProType.status" placeholder="选择是否启用">
            <el-option label="是" value="1"> </el-option>
            <el-option label="否" value="0"> </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button style="width:100px" type="primary" @click="submitForm('makeFromRef')">确 定</el-button>
        <el-button style="width:100px" @click="diaAddProType = false">取 消</el-button>
      </span>
    </el-dialog>

子组件：

 代码：

<template>
  <!-- 上传图片 -->
  <div class="uploadFileBox">
    <el-upload class="upload-file" action="#" :on-change="uploadChange" :show-file-list="false"
      :on-success="handlePictureCardPreview" :http-request="(e, file) => uploadBankImg(e)">
      <img v-if="value" width="100%" :src="value" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      <div slot="tip" v-if="isTip" class="el-upload__tip">{
   
   {tipContent}}</div>
    </el-upload>
  </div>
</template>

<script>
  import {
    putImg
  } from '@/api/public/index';
  export default {
    props: {
      value: {
        type: String,
        default: ''
      },
      
    methods: {
      // 文件状态发生改变
      uploadChange(file) {
        // this.hedeUpload = this.fileList.length + 1;
        // console.log("222", this.fileList, this.fileList.length + 1);
        const isIMAGE =
          file.raw.type === "image/jpeg" ||
          file.raw.type === "image/png" ||
          file.raw.type === "image/jpg" ||
          file.raw.type === "image/gif";
        /*var isIMAGE = /^image\/(jpeg|png|jpg|gif)$/.test(file.type);*/
        const isLt5M = file.size / 1024 / 1024 < 5;

        if (!isIMAGE) {
          this.$message.error("上传文件只能是图片格式!");
          return false;
        }
        if (!isLt5M) {
          this.$message.error("上传文件大小不能超过 5MB!");
          return false;
        }

        this.$emit("input", file.raw);
      },
     
      //文件上传成功时的钩子
      handlePictureCardPreview(file) {
        this.imageUrl = file.url
        this.dialogVisible = true;
        console.log('上传的图片', this.imageUrl);
      },
      // 上传图片
      uploadBankImg(e) {
        console.log('要上传图片了', e);
        // this.imageUrl = ''
        const obj = new FormData();
        obj.append("image", e.file);
        obj.append("pushType", this.pushType);
        if (this.isUseDefaultRequest) {
          putImg(obj, ).then((res) => {
            this.imageUrl = res.result
            this.$emit('input', this.imageUrl)
            console.log('imageUrl', this.imageUrl);
            // this.fileList.push({
            //   'url': res.result
            // })
          });
        } else {
          this.$emit('input', this.imageUrl)
        }
      },
    },
  };
</script>

<style lang="scss">
  .uploadFileBox {


    .upload-file .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      display: flex;
      align-content: center;
      justify-content: center;
    }

    .upload-file .el-upload:hover {
      border-color: #409EFF;
    }

    .uploadIconPlus {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
  }
</style>