vue2 el-upload照片墙 圆形进度条

Vue2的el-upload组件可以用于实现照片墙和圆形进度条的效果。

照片墙的实现可以通过el-upload的多文件上传功能来完成。你可以设置el-upload的action属性为上传图片的接口地址，然后通过设置el-upload的list-type属性为picture-card，即可实现照片墙的效果。此外，你还可以通过设置el-upload的limit属性来限制上传的图片数量。

圆形进度条的实现可以通过自定义el-upload的上传组件来完成。你可以使用element-ui提供的el-progress组件，并将其放置在el-upload组件内部。然后，通过监听el-upload的progress事件，获取上传进度的百分比，并将其传递给el-progress组件的percentage属性，即可实现圆形进度条的效果。

相关问题

Vue2 el-upload clearFiles

Vue2的el-upload是一个非常常用的上传组件，它可以实现文件的上传、预览、删除等功能。其中，clearFiles是el-upload中的一个方法，用于清空已上传的文件列表。

当使用clearFiles方法时，它会清空el-upload中已上传的文件列表，并触发on-change事件。在清空文件列表时，我们可以设置clearFiles方法的参数来指定需要清空哪些文件，如果不传参数，则默认清空所有已上传的文件。

需要注意的是，clearFiles方法只能清空已上传的文件列表，并不能删除服务器上的文件。如果需要删除服务器上的文件，需要在后端进行处理。

修改el-upload 默认圆圈进度条样式

el-upload 是 ElementUI 中的一个上传组件，它默认提供了圆圈进度条来显示上传进度。但是有时候我们可能需要更加个性化的样式来满足自己的需求。那么如何修改 el-upload 默认圆圈进度条样式呢？

要修改 el-upload 默认的圆圈进度条样式，需要使用 scoped slots 来自定义进度条样式。具体操作如下：

1. 在 el-upload 组件中添加 scoped slots 属性，指定对应的插槽名称。

<el-upload
  class="upload-demo"
  action="/upload"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :file-list="fileList"
  :before-upload="handleBeforeUpload"
  :disabled="isDisabled"
  :show-file-list="showFileList"
  :on-success="handleSuccess"
  :on-error="handleError"
  :http-request="uploadRequest"
  :data="extraData"
  :headers="headers"
  :auto-upload="autoUpload"
  :multiple="multiple"
  :drag="drag"
  :accept="accept"
  :list-type="listType"
  :limit="limit"
  :with-credentials="withCredentials"
  :before-remove="beforeRemove"
  :on-exceed="handleExceed"
  scopedSlots={
    progress: 'custom-progress'
  }
>
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传 jpg/png 文件，且不超过 500kb</div>
  <div slot="trigger" class="el-upload__trigger">
    <i class="el-icon-upload"></i>
  </div>
</el-upload>

2. 定义对应的插槽，使用 <template> 标签包裹自定义的进度条样式。

<template slot="custom-progress">
  <div class="el-progress el-progress--line_vertical">
    <div class="el-progress-bar is-success is-vertical" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
      <div class="el-progress-bar__outer" style="height: 100%;">
        <div class="el-progress-bar__inner" style="height: 0%;"></div>
      </div>
    </div>
  </div>
</template>

3. 在自定义的进度条样式中添加样式，实现个性化的进度条效果。

需要注意的是，在自定义样式时需要考虑到进度条的动态变化，例如：进度条颜色、高度、宽度以及进度值等。可以使用 Vue 的响应式数据来改变样式，例如：

<template slot="custom-progress">
  <div class="el-progress el-progress--line_vertical">
    <div class="el-progress-bar is-success is-vertical" role="progressbar" :aria-valuenow="progress" aria-valuemin="0" aria-valuemax="100">
      <div class="el-progress-bar__outer" :style="{height: height}">
        <div class="el-progress-bar__inner" :style="{height: progress + '%', backgroundColor: color}"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      progress: 0,
      height: '100%',
      color: 'green'
    }
  }
}
</script>

通过以上步骤，就可以自定义修改 el-upload 的默认圆圈进度条样式了。