el-upload没发预览

你可以尝试以下方法解决`el-upload`组件无法预览的问题：

1. 确保你使用的是最新版本的`element-ui`库，可以通过更新依赖来进行升级。

2. 检查你的代码中是否正确设置了`action`属性和`on-success`事件，这些属性用于处理文件上传和上传成功后的回调。

3. 确认你的后端服务器已正确配置，能够处理文件上传请求并返回上传成功的响应。

4. 检查浏览器开发者工具中的控制台输出，查看是否有任何错误信息。

5. 确保你的文件类型和大小限制设置正确。可以使用`before-upload`事件进行检查和限制。

如果问题仍然存在，请提供更多的代码细节或错误信息，以便我能够更好地帮助你解决问题。

相关问题

el-upload文件点击预览

el-upload组件可以通过设置list-type属性为picture-card来实现点击图片预览的功能。具体实现方式如下：

1. 在el-upload组件中设置list-type属性为picture-card。
2. 在el-upload组件中添加一个slot插槽，用于自定义上传文件的内容。
3. 在slot插槽中添加一个el-image组件，用于显示上传的图片。
4. 在el-image组件中设置preview-src-list属性为上传的图片地址数组，这样就可以实现点击图片预览的功能。

示例代码如下：

<template>
  <el-upload
    class="upload-demo"
    action="/upload"
    list-type="picture-card"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :file-list="fileList">
    <i class="el-icon-plus"></i>
    <div class="el-upload__text">上传图片</div>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    <el-image
      slot="file"
      style="width: 100%"
      :preview-src-list="fileList.map(item => item.url)"
      :fit="fit"
      :lazy="lazy"
      :error-icon="errorIcon"
      :src="''">
    </el-image>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      fit: 'cover',
      lazy: true,
      errorIcon: 'el-icon-picture-outline'
    };
  },
  methods: {
    handlePreview(file) {
      // 点击预览图片
    },
    handleRemove(file) {
      // 删除图片
    }
  }
};
</script>

el-upload 鼠标悬浮 预览png

el-upload 是一个基于 Element UI 的上传组件，用于实现文件上传功能。鼠标悬浮预览 PNG 图片可以通过设置 el-upload 的属性和事件来实现。

首先，需要在 el-upload 中设置 accept 属性为 "image/png"，这样可以限制用户只能选择上传 PNG 格式的文件。

其次，使用 slot 插槽来自定义 el-upload 组件的内容，例如：

<el-upload
  accept="image/png"
>
  <i class="el-icon-plus"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  <div slot="tip" class="el-upload__tip">只能上传 PNG 格式的图片</div>
</el-upload>

然后，在 el-upload 上监听 file-list-change 事件来获取文件列表，并通过遍历 fileList 中的文件来判断是否为 PNG 图片。对于 PNG 图片，可以使用 FileReader 对象读取文件内容，然后在悬浮时展示预览效果。

<el-upload
  accept="image/png"
  @file-list-change="handleFileListChange"
>
  ...
</el-upload>

methods: {
  handleFileListChange(fileList) {
    fileList.forEach(file => {
      if (file.type === 'image/png') {
        const reader = new FileReader();
        reader.readAsDataURL(file.raw);
        reader.onload = () => {
          // 使用 reader.result 来展示预览效果
        };
      }
    });
  }
}

在预览效果中，可以使用 img 标签的 src 属性绑定 reader.result 来展示 PNG 图片的预览效果。

综上所述，我们可以通过设置 accept 属性为 "image/png"，使用 slot 插槽自定义文件上传组件的内容，监听 file-list-change 事件来获取文件列表，使用 FileReader 对象读取 PNG 图片的内容，并通过预览效果来展示 PNG 图片。