ElementUI 文件上传并预览：详细教程和代码示例

<template>
  <el-upload
    class='upload-demo'
    action='/upload'
    :on-success='handleSuccess'
    :on-preview='handlePreview'
    :list-type=''picture''
    :auto-upload='false'
    :file-list='fileList'
  >
    <el-button slot='trigger' size='small' type='primary'>选取文件</el-button>
    <el-button
      style='margin-left: 10px;'
      size='small'
      type='success'
      :disabled='!fileList.length'
      @click='submitUpload'
    >
      上传到服务器
    </el-button>
    <div slot='tip' class='el-upload__tip'>只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>
<script>
export default {
  data() {
    return {
      fileList: [],
    };
  },
  methods: {
    handleSuccess(response, file, fileList) {
      console.log(response, file, fileList);
    },
    handlePreview(file) {
      this.$preview(file.url, file.name);
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
  },
};
</script>
<p>在以上示例中，我们使用以下属性来实现文件预览功能：</p>
<ul>
<li>':on-preview': 设置文件预览的回调函数，当用户点击文件列表中的预览按钮时，会触发此函数。</li>
<li>':list-type': 设置列表类型为'picture'，这样上传的图片文件就可以在列表中显示缩略图。</li>
<li>'handlePreview' 方法中使用了 'this.$preview' 方法来实现文件预览功能。'$preview' 方法是 ElementUI 提供的一个全局方法，用于在浏览器中打开指定的文件。</li>
</ul>
<p>需要注意的是，在使用 '$preview' 方法之前，需要先引入 'preview' 组件。你可以在 'main.js' 文件中添加以下代码：</p>
<pre><code>import { Preview } from 'element-ui';
Vue.use(Preview);
</code></pre>
<p>完成以上步骤后，你就可以在应用中使用 '$preview' 方法来实现文件预览功能了。</p>