element上传只显示一张图

当使用element上传组件时，只显示一张图片可能有几个原因。

首先，可能是因为上传组件的属性设置了`multiple`为`false`，这意味着只能上传一张图片。如果需要上传多张图片，可以将`multiple`属性设置为`true`。

其次，可能是因为在上传图片时限制了图片数量。可以通过设定`limit`属性来限制图片的数量，如果上传的图片数量超过了限制，则只会显示其中的一张图片。

另外，还可能是因为在服务器端设置了只接受一张图片的规则。当在上传图片时，服务器端会检查上传的文件数量，如果超过设定的限制，则只会处理其中的一张图片，其他的图片会被忽略。

此外，上传组件也有可能出现bug，导致只显示一张图片。如果遇到这种情况，可以检查element的版本是否有更新，或者尝试重新安装element组件，以解决可能的bug问题。

总之，只显示一张图片可能是由于属性设置、上传限制或其他原因导致的。要解决这个问题，可以检查上传组件的属性设置，服务器端的配置以及组件的版本等因素，以确定原因并采取相应的解决方法。

相关问题

怎么用element-ui写上传图片，要求：只能上传一张，多次上传会覆盖前一张，如果上传成功上传组件消失，显示上传的图片

你可以使用 Element UI 的 Upload 组件来实现上传图片的功能，具体步骤如下：

1. 在页面中引入 Element UI 的 Upload 组件：

<el-upload
  class="upload-demo"
  action="/upload"
  :before-upload="beforeUpload"
  :on-success="handleSuccess"
  :show-file-list="false">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传一张图片</div>
</el-upload>

2. 在 Vue 实例中定义 beforeUpload 和 handleSuccess 方法：

export default {
  methods: {
    beforeUpload(file) {
      // 判断上传的文件类型是否为图片
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      if (!isJPG && !isPNG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!')
        return false
      }
      // 判断上传的图片是否只有一张
      const isOnePic = this.files.length === 0
      if (!isOnePic) {
        this.$message.warning('只能上传一张图片!')
        return false
      }
    },
    handleSuccess(response) {
      // 上传成功后，将上传组件替换成上传的图片
      this.files.push({
        url: response.url,
        name: response.name
      })
    }
  },
  data() {
    return {
      files: []
    }
  }
}

在 beforeUpload 方法中，我们判断上传的文件类型是否为图片，并且判断上传的图片是否只有一张。在 handleSuccess 方法中，将上传成功后的图片保存到 data 的 files 数组中。

3. 在页面中展示上传成功后的图片：

<div v-if="files.length > 0">
  <img :src="files[0].url" width="200px" height="200px" alt="">
</div>

在页面中，我们通过 v-if 判断 files 数组中是否有数据，如果有，则展示上传成功后的图片。

需要注意的是，我们设置了 show-file-list 为 false，这样可以隐藏上传组件下方的文件列表，只展示上传按钮和提示信息。同时，在 beforeUpload 方法中，我们也要判断上传的文件类型和数量，确保上传的文件符合我们的要求。

vue element upload实现图片本地预览

使用vue element upload组件实现图片本地预览，首先需要使用el-upload组件来实现文件上传功能。在el-upload标签中，需要定义以下属性：
- action：上传文件的地址；
- list-type：设置为"picture-card"，以卡片形式展示上传的图片；
- on-preview：设置一个方法，用于点击预览图片。

然后，在methods中定义onPreview方法：

onPreview(file) {
  const reader = new FileReader();
  reader.onload = (e) => {
    this.previewImage = e.target.result;
    this.previewVisible = true;
  };
  reader.readAsDataURL(file.raw);
},

在data中定义预览图片的相关数据：

data() {
  return {
    previewVisible: false, // 控制预览对话框显示或隐藏
    previewImage: '' // 预览图片的地址
  }
},

在template中，使用el-dialog组件来实现图片预览的对话框：

<el-dialog
  :visible="previewVisible"
  :close-on-click-modal="true"
  @close="previewVisible = false"
>
  <img :src="previewImage" style="width: 100%" alt="图片预览">
</el-dialog>

最后，在el-upload中绑定on-preview方法：

<el-upload
  :action="uploadUrl"
  list-type="picture-card"
  @on-preview="onPreview"
>
  <i class="el-icon-plus"></i>
</el-upload>

以上就是使用vue element upload实现图片本地预览的代码。当用户选择一张图片后，点击图片会弹出预览对话框，显示选中的图片。