iview里Upload上传图片

 <Row class="rows" style="margin: 10px 0">
      <i-col span="2" style="padding-left: 15px"> 图片上传:</i-col>
      <i-col span="22" style="padding-left: 15px">
        <div
          class="demo-upload-list"
          v-for="(item, index) in uploadList"
          :key="index"
        >
          <template>
            <img :src="item" />
            <div class="demo-upload-list-cover">
              <Icon
                type="ios-eye-outline"
                @click.native="handleView(item)"
              ></Icon>
              <Icon
                type="ios-trash-outline"
                @click.native="handleRemove(index)"
              ></Icon>
            </div>
          </template>
        </div>
        <Upload
          ref="upload"
          :show-upload-list="false"
          :on-success="handleSuccess"
          :format="format"
          :on-format-error="handleFormatError"
          :before-upload="handleBeforeUpload"
          type="drag"
          :action="actionUrl"
          style="display: inline-block; width: 58px"
        >
          <div style="width: 58px; height: 58px; line-height: 58px">
            <Icon type="ios-camera" size="20"></Icon>
          </div>
        </Upload>
        <Modal title="查看图片" v-model="showImage" style="width: 50%">
          <img :src="uploadList[0]" v-if="showImage" style="width: 100%" />
        </Modal>
      </i-col>
    </Row>

data(){
return {
  showImage: false,
      uploadList: [],
      formItem: {
        shipSignInImg: "",
        memo: "",
      },
      format: ["jpg", "jpeg", "png", "gif", "webp"],
}
}

 computed: {
    actionUrl() {
      return process.env.NODE_ENV === "development"
        ? "http://192.168.0.172:9088/crm-ser/shipSignIn/upload"
        : process.env.VUE_APP_IP_POST + "crm-ser/shipSignIn/upload";
    },
  },

 methods: {
    handleView() {
      this.showImage = true;
    },
    handleRemove(index) {
      this.uploadList.splice(index, 1);
    },
    handleSuccess(res) {
      this.formItem.shipSignInImg = res;
    },
    handleFormatError(file) {
      if (this.format.length) {
        const _file_format = file.name.split(".").pop().toLocaleLowerCase();
        const checked = this.format.some(
          (item) => item.toLocaleLowerCase() === _file_format
        );
        if (checked) return true;
        this.$Message.error("上传图片格式错误，请重新上传！");
        return false;
      }
    },
    handleBeforeUpload(file) {
      this.file = file; //需要传给后台的file文件
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        const { result } = reader;
        if (this.uploadList.indexOf(result) === -1) {
          if (this.uploadList.length == 0) {
            this.uploadList.push(result);
          } else
            this.$Notice.warning({
              title: "仅支持上传一张",
            });
        } else this.$Message.warning("该图片已选择！");
      };
    },
}