el-upload本地

### Element UI `el-upload` 组件本地使用教程 #### 一、基本配置与初始化 为了在Vue项目中正常使用`el-upload`组件，首先需要安装并引入Element UI库。 ```bash npm install element-ui --save ``` 接着，在项目的入口文件（通常是main.js）中全局注册Element UI： ```javascript import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` #### 二、创建上传实例 定义一个简单的模板来展示如何利用`el-upload`实现文件上传功能。这里假设目标是在不发送请求到服务器的情况下处理文件选择事件[^3]。 ```html <template> <div id="app"> <!-- 设置action为空字符串表示仅触发前端逻辑 --> <el-upload ref="upload" class="upload-demo" action="" :on-change="handleFileChange" multiple :limit="3" :file-list="fileList" > <button type="button">点击上传</button> <span slot="tip" style="color:red;">最多可选三个文件</span> </el-upload> {{ fileList }} </div> </template> <script> export default { data() { return { fileList: [] }; }, methods: { handleFileChange(file, fileList) { console.log('Selected files:', file.raw); // 访问原始文件对象 this.fileList = fileList; } } }; </script> ``` 上述代码展示了如何监听文件变化(`:on-change`)并将选定的文件存储在一个数组变量中以便后续操作。注意这里的`action=""`意味着不会实际发起HTTP POST请求给任何URL。 #### 三、解决常见问题 ##### 图片回显时页面闪动 当使用`file-list`属性显示已上传图片列表时可能会遇到页面刷新或元素快速消失又重新出现的现象。这通常是因为每次更新状态都会引起DOM重绘造成的视觉效果。可以通过隐藏正在准备上传的状态项来缓解这个问题[^2][^4]: ```css <style lang="scss" scoped> ::v-deep .el-upload-list__item.is-ready, ::v-deep .el-upload-list__item.is-uploading { display: none !important; } </style> ``` 此CSS片段确保了只有完成上传过程后的条目才会可见，减少了不必要的动画干扰。 另外一种更优雅的方法是通过自定义回调函数控制UID的一致性，防止因UID改变而引起的视图抖动。 ##### 多个上传控件共用同一套行为逻辑 如果应用程序中有多个地方需要用到相同的上传机制，则可以考虑提取公共部分作为独立方法供各个组件调用[^1]。 ```javascript methods: { handleChange(uploadFile, uploadFiles, identifier) { switch(identifier){ case "logo": // 对应于Logo位置的具体业务逻辑 break; case "avatar": // 用户头像相关处理... break; default: throw new Error("未知标识符"); } console.info(`${identifier} changed`, {uploadFile, uploadFiles}); } }, // ... <!-- HTML Template Snippet --> <el-upload ... :on-change="(f, fs) => handleChange(f, fs, 'logo')">...</el-upload> <el-upload ... :on-change="(f, fs) => handleChange(f, fs, 'avatar')">...</el-upload> ``` 这种方法不仅提高了代码复用率还简化了维护成本。