element-plus中的文件上传

官网:https://element-plus.org/zh-CN/component/upload.html

简单使用:
场景:与表单项一起提交,但是需要回显功能,可以用过本地url预览方式实现

  <!-- 此处需要关闭 element-plus的自动上传,不需要配置 action等参数
            只需要做前端的本地预览图片即可,无需在提交前上传图片
            通过:URL.createObjectUrl(...) 创建本地预览的地址,来预览
        -->
        <el-upload
          class="avatar-uploader"
          :auto-upload="false"
          :show-file-list="false"
          :on-change="onUploadFile"
        >
          <img v-if="imgUrl" :src="imgUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>

js代码如下:

const imgUrl = ref('')
const onUploadFile = (uploadFile) => {
  //URL.createObjectURL 方法创建一个临时的 URL,
  //该 URL 可以用于表示上传文件。这个临时 URL 被赋值给 imgUrl.value,因此 imgUrl 中存储了上传文件的 URL。
  imgUrl.value = URL.createObjectURL(uploadFile.raw)
  // 将文件的值赋值给表单项存储,最后一起提交
  console.log(uploadFile.raw)
  formModel.value.cover_img = uploadFile.raw // base64
}
posted @   自学Java笔记本  阅读(478)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示