elementplus上传图片地址

### Element Plus 上传组件图片 URL 设置教程 #### 创建对象 URL 并设置给 img 标签 为了在 Vue3 和 Element Plus 中展示上传的图片，可以通过 `URL.createObjectURL` 方法来创建一个临时的对象 URL。此方法接收一个 `File` 或者 `Blob` 对象作为参数，并返回一个新的表示该文件或数据块位置的 DOMString。 当新的文件被选择时，应该先撤销之前可能存在的对象 URL 来避免内存泄漏： ```javascript const onUploadFile = (uploadFile) => { if (imgUrl.value) { URL.revokeObjectURL(imgUrl.value); imgUrl.value = ''; } imgUrl.value = URL.createObjectURL(uploadFile.raw); }; ``` 上述代码片段展示了如何安全地更新显示的图像路径[^2]。 #### 将上传后的图片链接保存至表单模型 除了为页面上的 `<img>` 元素提供 src 属性外，通常还需要把实际的文件信息存储起来以便后续提交到服务器或其他操作。这一步骤同样可以在处理文件输入事件时完成: ```javascript formModel.value.cover_img = uploadFile.raw; ``` 这段 JavaScript 脚本会将选中的文件赋值给名为 `cover_img` 的字段，在最终发送请求前可进一步转换成所需的格式。 #### 完整示例代码 下面是一个完整的例子，它不仅包含了前面提到的功能，还集成了基本的错误处理逻辑以及对用户界面状态的有效管理： ```vue <template> <div class="upload-demo"> <!-- el-upload 组件 --> <el-upload action="#" :auto-upload="false" :on-change="handleImageChange" list-type="picture-card" :file-list="fileList" > <i slot="default" class="el-icon-plus"></i> <div v-if="imageUrl" slot="file" slot-scope="{ file }"> <img class="el-upload-list__item-thumbnail" :src="imageUrl" alt="" /> <span class="el-upload-list__item-actions"> <span @click="removeImage(file)"> <i class="el-icon-delete"></i> </span> </span> </div> </el-upload> <!-- 预览图区域 --> <div v-show="imageUrl"> <h4>Preview:</h4> <img style="width: 100%" :src="imageUrl" alt="preview image"/> </div> <!-- 提交按钮 --> <button type="submit">Submit</button> </div> </template> <script setup lang="ts"> import { ref, reactive } from 'vue'; // 假设这是你的响应式变量定义部分 let imageUrl = ref(''); let fileList = ref([]); let formModel = reactive({ cover_img: null, }); function handleImageChange(file) { // 清除旧url并生成新url if (imageUrl.value) { URL.revokeObjectURL(imageUrl.value); } // 更新image url供预览使用 imageUrl.value = URL.createObjectURL(file.raw); // 存储原始文件对象以备将来上传 formModel.cover_img = file.raw; // 添加当前文件到列表中 fileList.value.push(file); } function removeImage(file) { let indexToRemove = fileList.value.indexOf(file); if (indexToRemove !== -1 && imageUrl.value === file.url) { URL.revokeObjectURL(imageUrl.value); // 取消之前的object url imageUrl.value = ''; // 移除预览图 fileList.value.splice(indexToRemove, 1); // 从列表移除该项 } } </script> ``` 在这个模板里，通过监听 `el-upload` 组件的变化(`onChange`)事件触发函数 `handleImageChange()` ，从而动态改变视图上呈现的内容；同时提供了清除已加载资源的能力，即点击删除图标调用 `removeImage()` 函数来清理不再需要的数据和关联的 URL。