深入了解el-uploaddata

发布时间：2023-05-20

一、上传文件的基本使用

el-uploaddata 是基于 element-ui 所提供的上传文件组件，可以实现文件的选择、拖拽、上传等功能。下面是一个简单的示例：

<el-uploaddata
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-uploaddata>

其中，class="upload-demo" 表示样式的类名，可以根据自己的需求进行定义；action 属性是上传的地址；file-list 属性是文件列表，我们需要定义一个 data 属性来存储，这样上传成功的文件就会添加到列表中；slot="tip" 表示提示信息的插槽名称，这里的提示信息是自定义的。 可以看到，el-uploaddata 提供了非常方便的上传文件功能，可以适应大多数场景。接下来我们将详细介绍它的各种使用方法。

二、多文件上传

有些情况下，我们需要同时上传多个文件。此时，我们可以添加 multiple 属性，然后修改之前的 data 属性为数组即可：

<el-uploaddata
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :file-list="fileList"
  multiple>
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-uploaddata>

三、限制上传的文件类型和大小

有些情况下，我们需要限制上传的文件类型、大小等。这里我们可以使用 before-upload 属性，来进行校验。我们可以定义一个函数，在上传之前对文件进行大小、类型等方面的判断，仅当满足条件时才允许上传。下面是一个例子：

<el-uploaddata
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :file-list="fileList"
  :before-upload="beforeUpload">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-uploaddata>

然后我们需要定义一个 beforeUpload 方法：

beforeUpload(file) {
  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isJPG) {
    this.$message.error('上传头像图片只能是 JPG 或 PNG 格式');
  }
  if (!isLt2M) {
    this.$message.error('上传头像图片大小不能超过 2MB');
  }
  return isJPG && isLt2M;
}

在这个例子中，我们限制了上传的文件类型只能为 JPG 或 PNG 格式，并且文件大小不能超过 2MB。如果上传的文件不符合条件，就会弹出提示信息。如果符合条件，就会返回 true，然后进行上传操作。

四、拖拽上传

使用 el-uploaddata，我们还可以通过 drag 属性，来实现拖拽上传。具体实现方法如下：

<el-uploaddata
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :file-list="fileList"
  :drag="drag">
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-uploaddata>

其中，i 标签和 div 标签中的内容为拖拽上传时的界面，可以根据自己的需求进行修改。

五、图片预览

除了上传文件以外，el-uploaddata 还提供了对上传图片的预览功能。我们只需要添加一个预览的插槽即可：

<el-uploaddata
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :file-list="fileList"
  :on-preview="handlePictureCardPreview">
  <i class="el-icon-plus"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
  <div v-if="dialogImageUrl" class="image-dialog">
    <img :src="dialogImageUrl" alt="" />
  </div>
</el-uploaddata>

然后再定义一个 handlePictureCardPreview 方法：

handlePictureCardPreview(file) {
  this.dialogImageUrl = file.url;
  this.dialogVisible = true;
}

在这个例子中，我们添加了一个与 el-uploaddata 同级的 div 标签，用于存储图片预览的界面。预览的功能可以通过 on-preview 属性来实现，然后我们需要定义一个 handlePictureCardPreview 方法，在该方法中设置预览图片的地址和弹窗的可见性。 通过以上几个例子，我们可以看到 el-uploaddata 提供了丰富的上传文件的功能，不仅可以满足基本的上传需求，也可以通过一些属性和方法，灵活定制自己需要的功能。同时，element-ui 的组件库也提供了其他一些上传文件相关的组件，如 el-uploaddragger、el-upload、el-uploader 等，可以根据自己的具体需求进行选择。

推荐文章