element 图片上传 与 回显 代码

<template>
  <div>
    <el-upload
      :class="showImg ? 'upload-disabled' : ''"
      :file-list="imglistmore"
      :multiple="true"

      action="需要上传的服务器地址"
      
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-exceed="exceed"
      :on-remove="coverRemove"
      :on-success="successimg"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 图片列表
      imglistmore: [],
      delImgArr: [],
      dialogImageUrl: "",
      dialogVisible: false,
      spimglist: [],

      // 后端传回来的数据需要操作
      img:"https://avatar.csdnimg.cn/5/2/5/3_qq_43617532.jpg,https://avatar.csdnimg.cn/5/2/5/3_qq_43617532.jpg",
    };
  },
  created() {
    // 回显图片 操作 添加 url name 放入组件:file-list
    this.imglistmore = this.img.split(",").map((item) => {
      return {
        name: item,
        url: item,
      };
    });
    console.log( this.imglistmore);
  },
  computed: {
    //监听 图片超过10张时 将添加样式取消 也可以不加 用:limit="10"限制
    showImg() {
      return this.imglistmore.length >= 10;
    },
  },
  methods: {
    // 最多
    exceed() {
      this.$message({
        message: "最多上传10张照片哦",
        type: "warning",
      });
    },

    // 成功
    successimg(response, file, fileList) {
      if (response.msg === "成功") {
        this.$message({
          message: "上传成功",
          type: "success",
        });
        console.log(response.object[0]);
        this.spimglist.push(
          "拼上你的上传地址路径" + response.object[0] //加上服务器域名
        );
        console.log(this.spimglist,"获取到的数据返回放如接口传给后端");
      } else {
        this.$message.error("上传失败！");
      }
    },
    // 删除
    coverRemove(file, fileList) {
      if (
        file.response &&
        file.response.code === 200 &&
        file.response.msg === "成功"
      ) {
        this.delImgArr.push(file.response.object[0]);
        const index = this.spimglist.indexOf(file.response.object[0]);
        this.spimglist.splice(index, 1);
        console.log(this.spimglist);
      }
    },

    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 图片列表结束
  },
};
</script>

<style lang='scss' scoped>
.upload-disabled /deep/.el-upload--picture-card {
  display: none;
  background-color: red;
  width: 500px;
}
</style>