iview上传控件upload,手动上传控制

iview上传控件upload,手动上传控制

场景：实现不通过action地址自动上传，而是通过点击上传按钮手动上传的实现。

效果图：

以下是完整的代码：

<template>
  <div>
    <div class="demo-upload-list" v-for="item in uploadList" :key="item.url">
      <img :src="item.url" />
      <div class="demo-upload-list-cover">
        <Icon
          type="ios-eye-outline"
          @click.native="handleView(item.url)"
        ></Icon>

        <Icon
          type="ios-trash-outline"
          @click.native="handleRemove(item)"
        ></Icon>
      </div>
    </div>
    <Upload
      ref="upload"
      :show-upload-list="true"
      :format="['jpg', 'jpeg', 'png']"
      :before-upload="handleBeforeUpload"
      multiple
      type="drag"
      action=""
      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="visible">
      <img :src="imgUrl" v-if="visible" style="width: 100%" />
      <div slot="footer" class="modal_footer">
        <Button
          class="option_btn"
          @click="visible = false"
          style="background-color: #e00003;"
          >确定</Button
        >
        <!-- <Button class="option_btn" @click="close_modal" style="background-color: #a1a0ae;">取消</Button> -->
      </div>
    </Modal>
    <Button :loading="confirmLoad" style="background-color:#1890ff;color: #fff" @click="upload">
      上传
    </Button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgUrl: "",
      visible: false,
      // 上传的文件数组
      uploadList: [],
      onceUpload: true,
      //按钮加载
      confirmLoad: false
    };
  },
  methods: {
    /**
     *  方法作用:  预览图片
     **/
    handleView(url) {
      this.imgUrl = url;
      this.visible = true;
    },
    /**
     *  方法作用:  去除上传文件
     **/
    handleRemove(file) {
      this.uploadList.splice(this.uploadList.indexOf(file), 1);
    },
    
    /**
     *  方法作用:  获取上传文件
     **/
    handleBeforeUpload(file) {
      file.url = this.convertSrc(file);
      let segmentation= file.name.split(".");
      if (
        segmentation[segmentation.length - 1] == "png" ||
        segmentation[segmentation.length - 1] == "jpg" ||
        segmentation[segmentation.length - 1] == "jpeg"
      ) {
        this.uploadList.push(file);
      } else {
        this.$Message.info(`上传类型只能是jpg,jpeg,png`);
        return;
      }
      // false代表不上传到action的地址，只能手动上传，true 代表根据action地址  自动上传
      return false;
    },
    /**
     *  方法作用:  上传
     **/
    upload() {
     let that = this;
      if (that.uploadList.length == 0) {
        that.$Message.error("上传文件不能为空");
        return;
      }
      //按钮加载
      this.confirmLoad = true;
      let formData = new FormData();
      for (let i = 0; i < that.uploadList.length; i++) {
        formData.append("file", that.uploadList[i]);
      }
      console.log("提交图片");
      //防止多次點擊
      if (this.onceUpload) {
        this.onceUpload = false;
        //调用上传接口，上传图片
        this.$api
          .uploadFile(formData)
          .then(res => {
            if (res.code === 200) {
              this.$Message.success("上传成功");
            } else {
              this.$Message.warning(res.message);
            }
            this.confirmLoad = false;
            that.uploadList = [];
            this.onceUpload = true;
          })
          .catch(err => {
            this.confirmLoad = false;
            this.onceUpload = true;
          });
      }
    },
    /**
     *  方法作用:  转换成SRC显示在页面上
     **/
    convertSrc(file) {
      return window.URL.createObjectURL(file);
    }
  },
  mounted() {
  }
};
</script>
<style>
.modal_footer {
  margin: 0;
}
.demo-upload-list {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}
.demo-upload-list img {
  width: 100%;
  height: 100%;
}
.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}
.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
</style>

以下是引用的文章：

iview实现图片上传功能
https://www.h5w3.com/237429.html

iview upload 组件
http://t.csdn.cn/UxMZn

iView上传文件控件的使用(预览+控制上传)
http://t.csdn.cn/1Om78