关于vue中使用组件elementui上传文件以及回显，删除图片、点击放大图片

 

   <el-col :span="20">

          <div class="picture-text">图片:</div>

          <el-upload

            action="/api/framework/upload"

            :headers="headers"

            list-type="picture-card"

            name="fileName"

            :data="imgs"

            :on-remove="handleRemove"

            :on-success="handleAvatarSuccess"

            :limit="limit"

            :file-list="fileList"

          >

            <i class="el-icon-plus"></i>

          </el-upload>

          <el-dialog :visible.sync="dialogVisible">

            <img width="100%" :src="dialogImageUrl" alt="加载失败" />

          </el-dialog>

          <el-dialog :visible.sync="dialogVisible">

            <img width="100%" :src="dialogImageUrl" alt="" />

          </el-dialog>

        </el-col>

// 图片上传

    handleAvatarSuccess(res, file) {

      console.log("上传图", res, file);

      if (res.code == 200) {

        this.dialogImageUrl =

          this.basUrl + `xxx;

        this.$message({

          type: "success",

          message: "图片上传成功!",

        });

      } else {

        this.dialogImageUrl=""

        this.$message({

          type: "error",

          message: "网络错误!",

        });

      }

    },

    // 图片删除时

    handleRemove(file, fileList) {

      console.log("删除", file, fileList);

      this.dialogImageUrl = "";

      this.ruleFormtype.materialPictureUrl=""

    },

fileList很重要 可以绑定你上传的图片，必须是一个数组

 点击放大图我是在表单里回显的

     <template slot-scope="scope" align="center">

          <el-image

            style="width: 100px; height: 100px"

            :src="scope.row.materialPictureUrl"

            @click="bigPic(scope.row.materialPictureUrl)"

            :preview-src-list="arry"

          >

          </el-image>

        </template>

  :preview-src-list="arry" 可以实现点击的时候你给arry数组赋值上你图片的路径，即可回显大图，

希望能帮到大家