Element-plus upload带参数上传图片

这篇具有很好参考价值的文章主要介绍了Element-plus upload带参数上传图片。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

技术栈:Vue3 + Ts + Element-plus

一、需求描述

除了将图片上传到后端的指定接口,还需要在上传时携带后端规定的参数

二、详细使用

/src/components/Upload/index.vue 全量代码如下

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessageBox, type ElUpload } from 'element-plus'
import { fetchUploadImage } from '@/api/upload'
import { CirclePlus } from '@element-plus/icons-vue'

// 文件上传前触发-限制上图图片的大小和格式
const handleBeforeUpload = (file: any) => {
  // 拿到文件后缀名
  const fileType = file.name.substring(file.name.lastIndexOf('.') + 1)
  const isJpg = fileType === 'jpg'
  const isPng = fileType === 'png'
  const isJpeg = fileType === 'jpeg'
  // 根据后缀名判断文件类型
  if (!isJpg && !isPng && !isJpeg) {
    alert('只能上传图片和pdf格式的文件!')
    return false
  }
  const isLt1M = file.size / 1024 / 1024 < 2
  // 可以限制图片的大小
  if (!isLt1M) {
    alert('上传图片大小不能超过 2MB!')
  }
  return isJpg || isPng || isJpeg
}

// 文件超出上传限制 此方法是和:limit绑定的
const handleExceed = () => {
  ElMessageBox.alert('只能上传一个文件,如有需要请删除上一个文件再进行上传', '温馨提示', {
    confirmButtonText: '确定'
  })
}

// 获取 upload 组件ref
const uploadRef = ref<ComponentRef<typeof ElUpload>>()
const imgUrl = ref('null')
// 事件
const emit = defineEmits(['uploadImageSucceeded'])
// 上传文件方法
const uploadImage = async (file: any) => {
  const formData = new FormData()
  const flag = props.flag
  formData.append('file', file.file)            // 根据后端文档,我需要传递file 和 flag 两个参数
  formData.append('flag', flag.toString())      // 根据后端文档,我需要传递file 和 flag 两个参数
  const res = await fetchUploadImage(formData)  // 调用接口,将我们准备好的参数传递过去
  imgUrl.value = res.data
  clearFiles()
}

// 触发清空上传列表事件
const clearFiles = () => {
  // 清空已上传的文件列表(该方法不支持在 before-upload 中调用)
  uploadRef.value?.clearFiles()
}

// 将清空方法暴露出去,供父组件调用
defineExpose({
  clearFiles
})
</script>
<template>
  <div class="file-upload">
    <el-upload
      ref="uploadRef"
      accept="image/jpg,image/jpeg,image/png"
      action=""
      :before-upload="handleBeforeUpload"
      :limit="1"
      :http-request="uploadImage"
      :show-file-list="false"
      :auto-upload="true"
      :on-exceed="handleExceed"
      name="file"
    >
      <el-icon class="avatar-uploader-icon">
        <CirclePlus />
      </el-icon>
      <div class="upload-text">点击上传</div>
    </el-upload>
  </div>
</template>

文章来源地址https://www.toymoban.com/news/detail-522460.html

到了这里,关于Element-plus upload带参数上传图片的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3 - 使用element-plus组件库el-upload上传超大mp4视频分片上传,Upload上传大文件mp4视频进行切片分段上传到后端服务器教程,vue3如何上传很大的视频(详细示例代码

    在vue3+elementPlus中,使用el-upload组件\\\"切片分段\\\"上传mp4大视频到服务器,支持任意大视频、大文档、大压缩包等超大文件,通用方法将其拆分成多个小段进行逐个逐条上传到后端(支持断点续传、下载预览)。 详细大文件分片功能源码,可只拿前端源码或只拿springboot(Java)后

    2024年03月16日
    浏览(82)
  • vue3+element-plus上传文件,预览文件

    vue3+ts+element-plus上传文件,预览文件 场景:使用element-plus的el-upload标签,手动上传文件,可预览docx,xlsx,pdf,jpg,jpeg,png(本地资源以及网络资源)。 1、使用el-upload标签 检查上传文件的文件格式与大小 上传的附件信息在fileList中,组装接口所需数据进行上传 使用docx-preview插件预览

    2024年02月11日
    浏览(57)
  • vue3 element-plus 实现图片预览

    element-plus下有这么一个组件 el-image-viewer /,但是这个组件是没写在文档上面的,像普通组件一样使用即可 可以通过点击按钮实现图片预览,而非el-image组件只能通过点击图片实现预览 2.1封装组件 2.3组件使用 在需要使用的地方引入,然后使用即可,这不是重点,每个人使用的

    2024年02月15日
    浏览(59)
  • vue3 - element-plus 实现图片上传到服务器及预览、删除功能,支持显示进度条、上传失败错误占位的超好用的图像上传组件(详细运行示例及完整组件源码,一键复制开箱即用)

    本博客实现了 vue3 项目中,借助 element plus 上传组件,实现二次封装上传组件,支持放大预览、删除、上传进度条、图片回显、上传服务器完整示例源码及详细步骤流程。 代码整洁注释详细,直接复制组件源码,稍微改改就行了。 element-plus 提供

    2024年02月16日
    浏览(66)
  • vue3+element-plus点击列表中的图片预览时,图片被表格覆盖

    视觉 点击图片进行预览,但还能继续选中其他的图片进行预览,鼠标放在表格上,那一行表格也会选中,如图所示第一行的效果。 代码 官网文档有这么一个属性,官网是这个描述的Image属性。 在 el-image 中加入属性 preview-teleported=\\\"true\\\" 即可。

    2024年02月13日
    浏览(46)
  • element-plus图片预览

    背景: 项目中需要对图片进行放大预览操作; 解决方案: ① 使用 el-image 自带的预览功能; ②使用 el-image-preview 组件进行预览; 官方文档:Image 图片 | Element Plus 1. 官方示例: 2. 应用到项目中(完整代码): 3. 大致效果图: 1. el-image-preview 组件使用: 2. 使用示例: 3. 效果

    2024年02月15日
    浏览(55)
  • vue3使用element-plus

    element-ui 是配合 vue2 使用,element-plus 是配置 vue3 使用的 1. 包管理器的方式 如果是使用 webpack 或者 vite 打包工具新建的项目 2. 浏览器直接导入 直接通过浏览器的 HTML 标签导入 Element Plus,然后就可以使用全局变量 ElementPlus 1. 导入全部组件且注册所有的图标 声明使用 ElementPl

    2024年02月08日
    浏览(80)
  • Vue3导入Element-plus方法

    先引入依赖 main.js中要引入两个依赖 然后 这个东西 我们最好还是挂载vue上 所以 还是 然后 我们可以在组件上试一下用一个ElementUi的表格组件 参考代码如下 运行结果如下 也是没有任何问题

    2024年02月06日
    浏览(56)
  • Vite vue 使用cdn引入element-plus

    vite-plugin-cdn-import:cdn的引入插件 vite.config.js 使用cdn 引入 element-plus 一定也要用cdn 引入 vue、vue-demi 并且引入顺序不能出错, 注意点 ①  如果不引入vue,就会提示createElementVnode找不到, 原因是在element-plus这个源码中也在使用vue这个变量   ②如果不引入vue-demi,可以理解为vu

    2024年02月01日
    浏览(55)
  • vue3项目搭建并配置element-plus

    安装完成后,输入如下指令查看vue的版本: 选择一个要存放项目的目录,打开小黑窗输入如下命令: 一开始输入项目名称或者默认vue-project,然后根据需求选择Yes/No 生成完项目后,输入如下指令: src/main.js里引入 index.css的文件位置根据实际情况写,也有可能是 const app后面加

    2024年02月13日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包