el-upload上传图片暂存到前端

### 使用 `el-upload` 组件上传图片并进行前端暂存 为了实现使用 `el-upload` 组件来上传图片并在前端进行暂存，可以按照如下方式构建代码逻辑。此过程不仅涉及组件的基础配置，还包括处理文件超出限制的情况以及手动控制上传流程。 #### 配置 `el-upload` 首先定义好基本属性，比如设置自动上传为关闭状态以便于自定义上传行为，并指定当超过最大允许数量时触发的方法： ```html <template> <div id="app"> <!-- 关闭默认的立即上传 --> <el-upload :auto-upload="false" action="" list-type="picture-card" :on-exceed="handleExceed" ref="uploadRef" > <i class="el-icon-plus"></i> </el-upload> <el-button @click="submitUpload">提交</el-button> </div> </template> ``` 在此基础上，通过 JavaScript 控制具体的交互逻辑，特别是针对文件超限情况下的特殊处理——即删除先前存在的文件条目后再继续新的上传操作[^1]。 #### 处理文件超出限制 对于超出设定的最大文件数目的情形，可以通过重写 `handleExceed` 方法来进行管理。该函数接收两个参数：当前尝试添加的新文件对象 (`files`) 和已有的文件列表 (`fileList`)。在这里面可以根据实际需求决定如何响应用户的输入；例如移除最早的记录以腾出空间给新加入的内容。 ```javascript <script> export default { methods: { handleExceed(files, fileList) { this.$refs.uploadRef.clearFiles(); // 清空已有文件列表 const file = files[0]; this.$refs.uploadRef.handleStart(file); // 手动启动单个文件上传 }, submitUpload() { this.$refs.uploadRef.submit(); } } } </script> ``` 上述代码片段展示了怎样利用官方提供的 API 来清理旧的数据项，并且重新发起一次单独的上传请求。这有助于维持界面上只显示最新的待处理项目，从而达到所谓的“覆盖前一个文件”的效果。 #### 文件暂存机制 为了让用户能够在本地预览即将发送出去的照片而不必立刻将其推送到服务器端保存起来，则可以在每次成功加载完一张照片之后立即将其信息追加到临时存储容器内（如数组）。这样即使浏览器意外关闭也不会丢失未完成的任务进度。 ```javascript data() { return { tempFileList: [] }; }, methods: { beforeAvatarUpload(file) { let isJPG = file.type === 'image/jpeg'; let isLt2M = file.size / 1024 / 1024 < 2; if (!isJPG) { this.$message.error('上传头像图片只能是 JPG 格式!'); } if (!isLt2M) { this.$message.error('上传头像图片大小不能超过 2MB!'); } if (isJPG && isLt2M){ this.tempFileList.push({url: URL.createObjectURL(file)}); } return isJPG && isLt2M; } } ``` 这段脚本实现了简单的验证规则检查的同时还将合格的图像链接添加到了视图模型中的 `tempFileList` 属性里用于后续展示用途。每当有符合条件的新资源被选定时都会更新这个集合的状态变化，进而影响到 UI 的呈现形式[^3]。