vue2.0 使用element-ui里的upload组件实现图片预览效果方法

在使用Vue.js框架进行开发时，经常需要处理文件上传以及预览的场景。Element-UI是一个基于Vue.js的组件库，它提供了一套方便的上传组件，用于实现文件上传功能。本文将重点介绍如何在Vue2.0项目中使用Element-UI的upload组件实现图片上传并预览的功能。 我们需要确保已经安装并引入了Element-UI库。可以使用npm或yarn等包管理工具进行安装： ```bash npm install element-ui -S # 或者 yarn add element-ui ``` 安装完成后，需要在Vue项目中引入Element-UI，并通过Vue.use()方法进行全局注册： ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 接下来，我们要创建一个Vue组件，并在其中使用upload组件。对于图片预览功能，我们需要利用upload组件提供的on-change事件。当文件状态发生变化时，此事件会被触发，我们可以在这个回调函数中处理图片的预览逻辑。 以下是具体的实现步骤和代码示例： 1. 引入upload组件并使用它。我们可以使用<el-upload>标签来创建上传区域，并通过设置auto-upload属性为false来控制上传行为。同时，为<el-upload>标签添加on-change事件监听器，当文件状态改变时触发changeUpload方法。 ```html <template> <el-upload class="upload-demo" action="#" :auto-upload="false" :on-change="changeUpload"> <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> </el-upload> </template> <script> export default { data() { return { fileList: [] // 用于存储上传文件的信息 } }, methods: { changeUpload(file, fileList) { this.fileList = fileList; // 更新上传后的文件列表 // 在nextTick中处理图片预览的DOM操作 this.$nextTick(() => { let uploadListLi = document.getElementsByClassName('el-upload-list')[0].children; for (let i = 0; i < uploadListLi.length; i++) { let liA = uploadListLi[i]; let imgElement = document.createElement("img"); imgElement.setAttribute('src', fileList[i].url); // 设置图片的src属性 imgElement.setAttribute('style', "max-width:50%;padding-left:25%"); // 设置图片样式 if (liA.lastElementChild.nodeName !== 'IMG') { liA.appendChild(imgElement); // 将img元素添加到对应的DOM中 } } }) } } } </script> ``` 在上述代码中，我们首先在upload组件的class属性中添加了`upload-demo`，以定义上传区域的样式。我们设置`action`属性为`#`，这是指文件上传的服务器地址，在实际应用中需要根据后端接口进行修改。`auto-upload`属性设置为`false`表示用户手动上传文件。`on-change`事件绑定了`changeUpload`方法，用于处理上传后的文件列表更新和图片预览的实现。 在`changeUpload`方法中，我们首先获取当前的文件列表，并将其保存到组件的data属性中。然后使用`this.$nextTick`确保在DOM更新完成后进行操作。通过`document.getElementsByClassName`获取上传列表项，并遍历这些DOM元素，为它们动态添加图片元素以实现预览效果。 在实现图片预览功能时，需要注意的是，如果上传列表项已经有子元素，并且子元素不是`IMG`标签，那么需要向该列表项中添加新的`IMG`元素，并设置其`src`属性为当前上传文件的`url`属性值。这样做是为了在页面上展示图片预览。 此外，我们还可以为图片元素设置一些CSS样式，例如在示例代码中设置了图片的最大宽度为50%并添加了左侧内边距，以使图片显示更加美观。 通过上述步骤和代码示例，我们可以方便地在Vue2.0项目中集成Element-UI的upload组件，并实现图片的上传和预览功能。该组件大大简化了文件处理流程，并提供了友好的用户交互体验。对于需要在Web应用中实现文件上传功能的开发者来说，这是一个非常实用的解决方案。