526互联

element-plus中的文件上传

发布时间 2023-12-08 11:07:06作者: 自学Java笔记本

官网：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
}