Vue3 Element-plus Upload 上传图片

news2025/1/19 7:59:45

技术栈:Vue3 + Ts + Element-plus

官网地址:Upload 上传 | Element Plus

一、背景:

表单上传图片功能

二、效果:

三、流程:

点击上传图片按钮,系统弹出文件选择对话框,选择图片并确认

②调用上传接口

③接口将成功上传的图片链接返回给管理台,管理台将接收的图片链接保存到表单中

④提交表单

四、具体实现:

①书写API

//引入二次封装的axios
import request from "@/utils/request";

enum API {
  //上传图片接口
  UPLOAD_URL = '/saas-api/station/upload'
}
// 对外导出上传图片的接口
export const reqUpload = (file:any) => {
  // 创建了一个新的 FormData 对象,用于构建表单数据,并将file添加到FormData对象中
  const formData = new FormData();
  formData.append('file', file);

  return request.post(API.UPLOAD_URL, formData);
};

 备注:官网中upload组件中action是可以直接写请求 URL,因为我在请求头中添加了租户id和token,如果直接将URL写入action中会报错‘‘缺少租户id’’,所有利用axios请求URL

②具体业务实现

<el-form>
  <el-form-item label="图片" prop="imageUrl">
     <el-upload class="avatar-uploader" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
        <img v-if="chargeForm.imageUrl" :src="chargeForm.imageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
     </el-upload>
  </el-form-item>
</el-form>

<script setup lang="ts">
import { ref,reactive } from 'vue'
import {  reqUpload } from '@/api/device/station/index.ts'

//信息的收集
let chargeForm = reactive({
  imageUrl: '',
})

//图片上传成功的钩子
const handleAvatarSuccess: UploadProps['onSuccess'] = () => {
  //图片上传成功,清除掉对应图片校验结果
  chargeFormRef.value.clearValidate('imageUrl')
}
//上传图片组件->上传图片之前触发的钩子函数
const beforeAvatarUpload: UploadProps['beforeUpload'] = async (rawFile: any) => {
  //请求上传文件的接口
  let res = await reqUpload(rawFile)
  //将接口的地址赋值给表单并呈现
  chargeForm.imageUrl = res.data.url
  //上传图片格式和大小要求  png|jpg  4M
  if (rawFile.type !== 'image/png' || rawFile.type == 'image/jpg') {
    ElMessage.error('上传文件格式务必PNG|JPG')
    return false
  } else if (rawFile.size / 1024 / 1024 > 4) {
    ElMessage.error('上传文件大小小于4M')
    return false
  }
  // 取消默认的上传请求
  return false
}
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>

说明:

before-upload事件是上传文件之前的钩子,rawFile参数为上传的文件

点击上传图片时,请求后端接口(接口为封装好的reqUpload函数),将选中的文件作为接口的参数

具体实现在👉beforeAvatarUpload函数中

③遇到的问题

问题:

上传图片的接口是正常的,但出现一个localhost的请求报错

分析:

这个错误主要是出现在el-upload 组件的配置上。该组件在上传之前会触发 beforeAvatarUpload 函数,但是该函数内部的操作会导致额外的请求发送到 http://localhost:5173/,从而导致 404 错误。

解决:

在beforeAvatarUpload 的回调函数返回 false 来取消默认的上传请求。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/943798.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vscode编译C语言

首先把c文件拖到vscode中 然后安装这个插件 安装完毕后会提示你代码中的语法错误&#xff0c;并在编译器的右上角出现编译按钮 我当前的问题是没有GCC&#xff0c;我们点一下编译的按钮也可以看出来这个问题 在 django笔记中 附录二 windows上直接安装uwsgi(不可行) 附录二 win…

c刷题(三)

程序运行结果 int a, b, c; a 5; c a; b c, c, a, a; b a c; printf("a %d b %d c %d\n", a, b, c); line3&#xff1a;c6&#xff0c;a6&#xff1b; line4&#xff1a;(逗号表达式&#xff0c;从左向右计算&#xff0c;结果为最后一个表达式)c8&#xff…

前端:html实现页面切换、顶部标签栏,类似于浏览器的顶部标签栏(完整版)

效果 代码 <!DOCTYPE html> <html><head><style>/* 左侧超链接列表 */.link {display: block;padding: 8px;background-color: #f2f2f2;cursor: pointer;}/* 顶部标签栏 */#tabsContainer {width:98%;display: flex;align-items: center;overflow-x: …

深度学习——感受野

在CNN中&#xff0c;决定某一层输出结果中一个元素所对应的输入层的区域大小被称作感受野&#xff08;receptive field&#xff09;&#xff0c;指的是神经网络中一个神经元可以感知到的区域&#xff0c;在CNN中&#xff0c;即 上某个元素的计算受输入图像上影响的区域&#xf…

Android DataBinding 基础入门

DataBinding 是谷歌官方发布的一个框架&#xff0c;顾名思义即为数据绑定&#xff0c;是 MVVM 模式在 Android 上的一种实现&#xff0c;用于降低布局和逻辑的耦合性&#xff0c;使代码逻辑更加清晰。MVVM 相对于 MVP&#xff0c;其实就是将 Presenter 层替换成了 ViewModel 层…

github加速的方法

一、UU加速器 1、下载软件 网易UU加速器——不止快&#xff0c;还很稳 (163.com) 2、搜索学术两个字&#xff0c;点击启动游戏 二、Steam加速器 1、下载软件 Watt Toolkit - 瓦特工具箱(Steam官网) (steampp.net) 2、选择按钮之后&#xff0c;点击一键启动

聚焦磷酸铁锂产线革新,宏工科技一站式解决方案

兼顾了低成本与安全性两大属性&#xff0c;磷酸铁锂市场在全球范围内持续升温&#xff0c;并有望保持较高的景气度。巨大的需求空间之下&#xff0c;行业对于锂电装备企业的自动化与智能化水平、整线交付能力、产品效率与稳定性等均提出了新的要求。 以宏工科技股份有限公司&a…

【IOTE】物联网射频模组和芯片级方案提供商——深圳信驰达科技将精彩亮相IOTE物联网展

►►►强势来袭 Strong Attack 主物联场&#xff0c;相约深圳&#xff1b;2023&#xff0c;共论商机&#xff01;IOTE2023第二十届国际物联网展深圳站将于2023年9月20-22日在深圳国际会展中心(宝安新馆)开展&#xff01;汇聚全球超800家参展企业&#xff0c;呈现更多数字化纷呈…

恒运资本:两市迎普涨,创业板指涨超3%,汽车配件等板块走强

29日早盘&#xff0c;A股两市低开高走&#xff0c;沪指涨幅超1%&#xff0c;创业板指涨超3%。截至午间收盘&#xff0c;沪指涨1.39%报3141.82点&#xff0c;深成指涨2.41%&#xff0c;创业板指涨3.47%%&#xff0c;两市算计成交6265亿元。北向资金净流入超38亿元。盘面上&#…

基于面向对象的空间自相关指数,即插即用!Moran‘s I,局部莫兰指数,Geary‘s C指数,附完整可行使用案例

Geary’s C Geary’s C&#xff08;也称为Geary’s coefficient&#xff09;是一种用于衡量空间自相关性的统计指标&#xff0c;它可以用来评估地理数据中的空间聚集或离散程度。Geary’s指数的计算公式如下&#xff1a; G ( n − 1 ) ∗ ( Σ Σ w i j ∗ ( x i − x j ) 2…

windows下Node版本的切换方式

为了避免应用构建出错&#xff0c;我们在本地开发环境的 Node 版本与在 CI/CD 流程中指定的 Node 版本需保持一致。在这种需要频繁切换 Node 版本的情况下&#xff0c;我们不可能手动卸载又安装不同的版本&#xff0c;这时我们可以借助 NVM 工具来帮助我们快速地切换 Node 版本…

轻量、便捷、高效—经纬恒润AETP助力车载以太网测试

随着自动驾驶技术和智能座舱的不断发展&#xff0c;高宽带、高速率的数据通信对主干网提出了稳定、高效的传输要求&#xff0c;CAN(FD)、LIN已无法充分满足汽车的通信需求。车载以太网作为一种快速且扩展性好的网络技术&#xff0c;已经逐步成为了汽车主干网的首选。 此外&…

无涯教程-Android - Services

服务是在后台运行以执行长时间运行的操作而无需与用户交互的组件&#xff0c;并且即使应用程序被破坏&#xff0c;它也可以工作。服务实际上可以采取两种状态- Sr.No.State & Remark1 Started 当应用程序组件(如Activity)通过调用 startService()启动服务&#xff0c;启动后…

vue数组对象中按某一字段排序

给下列数组字段中的month排序 第一步&#xff1a;methods中写一个方法如下&#xff1a; sortBy(attr, rev) {//第二个参数没有传递 默认升序排列if(rev undefined) {rev 1;} else {rev (rev) ? 1 : -1;}return function(a, b) {a a[attr];b b[attr];if(a < b) {retu…

概念解析 | 合成孔径雷达在海洋动力学研究中的应用

注1:本文系“概念解析”系列之一,致力于简洁清晰地解释、辨析复杂而专业的概念。本次辨析的概念是:合成孔径雷达海洋动力研究。 揭秘海洋的心跳:合成孔径雷达与海洋动力学的交响乐 海洋,那个占据地球表面三分之二的神秘世界,它的运动和变化直接影响着全球气候系统,以及…

解决maven仓库无法自动下载程序包的问题

在调试idea项目报错&#xff1a;未解析的依赖项:de.fhpotsdam:unfolding:jar:0.9.6 问题描述解决方法总结 问题描述 在调试idea项目时报如上所示错误&#xff0c;并尝试了网上所说的更改maven仓库为阿里云仓库等方法&#xff0c;但是maven均无法自动下载unfolding程序包。 解…

企业重要数据怎么加密?企业数据加密软件哪个好?

企业的数据安全至关重要&#xff0c;关系到企业的健康发展&#xff0c;我们可以采用加密的方法来保护企业数据安全。那么&#xff0c;企业重要数据该怎么加密呢&#xff1f;企业数据加密软件哪个好&#xff1f;下面我们就来了解一下。 企业数据加密要求 企业数据加密的要求往…

YOLOv5模型压缩:综述

YOLOv5模型压缩:综述 AbstractIntroduction剪枝基于ln-范数修剪模型Feature map activationBatch normalization scaling factor (BNSF)First-order derivativeMutual informationGranularity of Pruning非结构化剪枝结构化剪枝基于通道的修剪基于滤波器的修剪基于核的剪枝关于…

AutoRunner自动化测试工具新版本智能识别算法之视觉识别

泽众AutoRunner&#xff08;简称AR&#xff09;是国内专业的支持C/S、B/S各种技术框架的、基于组件识别的自动化测试工具&#xff0c;实现7*24小时的自动化回归测试和功能测试&#xff0c;让测试更智能。 视觉识别是一种通过计算机技术对图像或视频进行分析和理解的方法。这种算…

checkstyle检查Java编程样式:final参数

checkstyle可以利用FinalParameters检查方法、构造器、catch和for-each块的参数是final的&#xff1a; https://checkstyle.sourceforge.io/checks/misc/finalparameters.html 背后的原理&#xff1a;程序执行期间修改参数的值会引起混乱&#xff0c;所以应该避免。 要配置使…