iView Upload 优雅实现手动上传文件

2023-10-12 13:51:28

引言

iView 中的 Upload 组件，提供了一种便捷而强大的文件上传功能，可以极大地简化我们的开发工作。然而，在某些场景下，我们需要对上传过程进行更精细的控制，例如手动触发上传。本文将重点介绍如何利用 iView 的 Upload 组件，实现手动上传文件的优雅解决方案。

实现手动上传

iView 的 Upload 组件支持通过设置 auto-upload 属性为 false 来关闭自动上传。当 auto-upload 为 false 时，需要手动调用 submit() 方法来触发文件上传。

以下是手动上传的实现步骤：

在 Vue 组件中，引入 Upload 组件。

import { Upload } from 'iview';

创建 Upload 组件实例，并设置 auto-upload 为 false。

export default {
  components: { Upload },
  data() {
    return {
      fileList: [],
      uploadDisabled: false
    };
  },
  methods: {
    // 手动触发上传
    uploadFiles() {
      this.uploadDisabled = true;
      this.$refs.upload.submit();
    }
  }
};

在模板中，使用 ref 属性将 Upload 组件实例与 vue 实例绑定，并设置 action 属性指向服务器端的文件上传接口。

<template>
  <Upload
    ref="upload"
    :action="serverUrl"
    :file-list="fileList"
    auto-upload="false"
  >
    <i-button type="primary" @click="uploadFiles">上传</i-button>
  </Upload>
</template>