el-upload怎么使上传文件显示于按钮右方 并且显示

可以使用 `el-upload` 组件的 `show-file-list` 和 `list-type` 属性来实现上传文件显示于按钮右方并且显示。

例如：

<el-upload
  action="/upload"
  :show-file-list="false"
  list-type="picture-card"
>
  <i class="el-icon-plus"></i>
  <div class="el-upload__text">上传文件</div>
</el-upload>

这里的 `show-file-list` 属性设置为 `false`，表示不显示已上传文件列表，而 `list-type` 属性设置为 `picture-card`，表示以图片卡片形式显示上传文件。

同时，在 `el-upload` 组件内部，可以放置一个图标和文本，用于表示上传按钮。在这个例子中，使用了 `el-icon-plus` 图标和 `上传文件` 文本。

这样设置后，上传文件后会显示在按钮右方，并且以图片卡片形式显示。

相关问题

el-upload怎么使上传文件显示于按钮右方 并且显示上传过程

你可以在 `el-upload` 组件中使用 `list-type` 属性来设置文件列表的类型为 `picture-card`，这样上传的文件就会以卡片形式显示，并且能够实现显示上传过程的效果。

例如：

<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  list-type="picture-card"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-upload="beforeUpload"
  :on-progress="handleProgress"
  :on-success="handleSuccess"
  :on-error="handleError">
  <i class="el-icon-plus"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>

在上传过程中，你需要在 `el-upload` 组件中添加 `on-progress` 事件，然后在对应的方法中实现上传过程的显示效果。

例如：

handleProgress(event, file, fileList) {
  // 计算上传进度并更新到页面上
  const percent = file.percent.toFixed(2)
  const progress = `${percent}%`
  file.progress = progress
  this.fileList = fileList.slice(0)
}

其中，`event` 参数是上传进度事件，`file` 参数是当前上传的文件对象，`fileList` 参数是上传文件列表。在方法中，我们通过对上传进度的计算和更新，将上传进度更新到页面上，从而实现了显示上传过程的效果。

el-upload怎么使上传文件显示于按钮右方

要使上传文件显示于按钮右方，可以使用 `el-upload` 组件的 `list-type` 属性为 `picture-card`，并设置 `show-file-list` 属性为 `false`。这样，上传文件后，文件就会显示在按钮右方，并且不显示文件列表。

以下是一个示例代码：

<el-upload
  class="upload-demo"
  action="/upload"
  :list-type="'picture-card'"
  :show-file-list="false">
  <i class="el-icon-plus"></i>
  <div class="upload-text">上传文件</div>
</el-upload>

你可以根据需要修改 `action` 属性、按钮图标和文本内容等。同时，你还可以在 `el-upload` 组件上添加其他属性来设置上传文件的相关配置，比如 `accept` 属性、`multiple` 属性等。