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属性，即可实现圆形进度条的效果。

相关问题

vue3，el-upload上传过程显示进度条

在Vue3中，可以使用`el-upload`组件实现文件上传功能，并且支持显示上传进度条。具体实现步骤如下：

1. 在模板中引入`el-upload`组件，并设置`action`属性为上传文件的后端接口地址，`show-file-list`属性为`false`以隐藏上传文件列表：

<el-upload
  class="upload-demo"
  action="/api/upload"
  :show-file-list="false"
  :on-progress="onProgress"
>
  <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

2. 在`<el-upload>`标签内设置`on-progress`属性，指定上传进度的回调函数。该回调函数会在上传过程中被调用，接收一个`event`参数，其中包含了上传进度信息。在回调函数中，可以将上传进度信息保存到`data`中，用于显示上传进度条。

<el-upload
  ...
  :on-progress="onProgress"
>

export default {
  data() {
    return {
      uploadProgress: 0
    }
  },
  methods: {
    onProgress(event, file, fileList) {
      this.uploadProgress = event.percent
    }
  }
}

3. 在模板中添加一个`<el-progress>`标签，用于显示上传进度条。将`percent`属性设置为上传进度的百分比。

<el-progress :percentage="uploadProgress"></el-progress>

通过以上步骤，即可实现在Vue3中使用`el-upload`组件上传文件，并显示上传进度条的功能。

el-upload 自定义上传显示进度条

要自定义 el-upload 组件的上传显示进度条，可以通过监听 upload-progress 事件来获取上传进度，并在模板中展示进度条。

首先，在 el-upload 组件上添加 upload-progress 事件监听器，并绑定一个处理函数。例如：

<el-upload
  class="upload-demo"
  :action="yourUploadAPI"
  :on-progress="handleUploadProgress"
>
  <!-- ... -->
</el-upload>

然后在 Vue 实例中定义 handleUploadProgress 方法，该方法会在上传过程中被调用，传入一个 progressEvent 对象，其中包含了上传进度信息。在该方法中，你可以根据 progressEvent 的 loaded 和 total 属性计算出进度百分比，并将其保存到 Vue 实例的 data 中。

data() {
  return {
    uploadProgress: 0
  };
},
methods: {
  handleUploadProgress(progressEvent) {
    if (progressEvent.lengthComputable) {
      this.uploadProgress = Math.round(
        (progressEvent.loaded * 100) / progressEvent.total
      );
    }
  }
}

最后，在模板中展示进度条，使用 el-progress 组件，绑定进度百分比数据。

<el-progress
  v-if="uploadProgress > 0"
  :percentage="uploadProgress"
  :show-text="false"
></el-progress>

这样就可以实现自定义上传显示进度条了。记得将 yourUploadAPI 替换为你的上传接口地址。