Elementplus遇到的问题

  • 问题1:
    el-upload 手动上传图片,,上传之后,,el-upload 中插槽的图片无法显示,,,官网也是无法显示
    • 手动上传图片,,,返回图片的url,,然后在上传表单
      在这里插入图片描述
  <el-form-item label="图片" prop="imgUrl"  >
        <img v-if="form.imgUrl" :src="form.imgUrl" class="avatar"/>
        <el-upload :before-upload="handleBeforeUpload" action="#" list-type="picture-card" :auto-upload="true" :limit="1" :on-exceed="handleExceed" ref="upload">
          <img v-if="false" src="#" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
const uploadFile = (file)=>{
  var formData = new FormData();
  formData.append("file",file)
  return http.post("/upload",formData,{
    headers:{
      "Content-Type":"multipart/form-data"
    }
  })
}
let imgUrl = ref("")
const handleBeforeUpload = async (file) => {
  console.log(file)
  if (file.type !== "image/jpeg" && file.type !== "image/png") {
    ElMessage.error("图片格式不对")
    return false
  } else if (file.size / 1024 / 1024 > 5) {
    ElMessage.error("太大")
    return false;
  }


  let {data: res} = await uploadFile(file)


  form.imgUrl = res

  // 阻止默认上传
  return false
}

引用:https://blog.csdn.net/weixin_71403100/article/details/132539971

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Unity中Shader指令优化(编译后指令解析)

文章目录 前言一、我们先创建一个简单的Shader二、编译这个Shader&#xff0c;并且打开1、编译后注意事项2、编译平台 和 编译指令数3、顶点着色器用到的信息4、顶点着色器计算的核心部分5、片元着色器用到的信息6、片元着色器核心部分 前言 我们先读懂Shader编译后代码&#…

加强网站稳定性!学习如何进行高效压力测试!

前言 1、什么是压力测试&#xff1f; 软件压力测试是一种基本的质量保证行为&#xff0c;它是每个重要软件测试工作的一部分。 软件压力测试的基本思路很简单&#xff1a;不是在常规条件下运行手动或自动测试&#xff0c;而是在计算机数量较少或系统资源匮乏的条件下运行测试…

红队攻防实战之某商城Getshell

此后如竟没有炬火&#xff0c;我便是唯一的光 信息收集 端口扫描 nmap -T4 -A -p 1-65535 可以看到目标系统开放22、80、888、3306、8800端口 敏感文件扫描 http:///admin/login.html 后台登陆地址泄露 漏洞挖掘 phpinfo信息泄露 phpinfo信息泄露&#xff0c;此站为Linu…

如何使用windows Terminal终端连接远程Linux服务器

近接触到了zsh这个shell&#xff0c;所以在ubuntu系统上反复折腾&#xff0c;终于在ubuntu-desktop系统上使用oh-my-zsh和powerlevel10k配置好了一个比较好看的终端&#xff08;个人认为挺好看&#xff0c;勿喷&#xff09;。 但是在从windwos的Mobaxterm登录ubuntu查看时&…

MySQL字符函数

在数据库中&#xff0c;字符函数是一组用于处理字符串的函数。这些函数可以帮助我们执行各种操作&#xff0c;如连接、比较、替换等。本文将介绍一些常用的MySQL字符函数&#xff0c;并演示如何在查询中使用它们。 1.concat() 函数 CONCAT() 函数用于连接两个或多个字符串。它…

Unity UGUI控件之Horizontal Layout Group

Horizontal Layout Group是Unity中的UGUI控件&#xff0c;用于在水平方向上对子对象进行布局。 主要有一下作用&#xff1a; 水平布局&#xff1a;Horizontal Layout Group将子对象按照水平方向进行布局&#xff0c;可以控制子对象的排列顺序和间距。自动调整尺寸&#xff1a…

Linux环境下ARM开发

目录 前言ARM启动及开发基础1.Cortex-A架构2.启动方式3.汇编基础4.Makefile语法基础5.Makefile补充6.编译下载 结语 前言 主要介绍基于linux开发环境下&#xff0c;如何开发ARM A7 ARM启动及开发基础 1.Cortex-A架构 1&#xff09;Cortex-A7运行模式 模式说明User(USR)用户模…

WSL2+tensorflow-gpu 2.3.0 C++ 源码编译

wsl2已有gcc 版本为9.4.0&#xff0c;但tensorflow2.3.0需对应gcc7.3.1 tensorflow与cuda cudnn python bazel gcc版本对应关系 故需下载一个低版本的gcc&#xff0c;但同时还想保留较高版本的gcc&#xff0c;那么参考文章&#xff1a;深度学习环境搭建(二): Ubuntu不同版本g…

springboot数据格式验证——自定义日期格式验证及list验证

我们在工作中经常需要对日期格式进行定义&#xff0c;如果客户端传来的日期字符串不符合要求&#xff0c;那么根本无法保存&#xff0c;但是已有的注解并没有日期格式的验证&#xff0c;那我们就自己实现一个 一、自定义日期格式验证的注解DateFormat import javax.validatio…

SpringBoot结合easyexcel处理Excel文件

原创/朱季谦 假如有这样一个需求&#xff0c;每天需要读取以下表头的Excel文件&#xff0c;统计文件里击中黑名单的比例&#xff0c;该文件is_blacklist列的1表示击中了黑名单&#xff0c;0表示未击中黑名单。 基于该需求&#xff0c;可以在定时任务通过easyexcel工具进行处理…

IBL环境贴图原理及着色器实现【基于图像的照明】

IBL - Image Based Lighting - 也就是基于图像的照明&#xff0c;是一组照亮物体的技术&#xff0c;不是像上一章那样通过直接分析光&#xff0c;而是将周围环境视为一个大光源。 这通常是通过操作立方体贴图环境贴图&#xff08;取自现实世界或从 3D 场景生成&#xff09;来完…

停止在 TypeScript 中使用 any 类型

停止在 TypeScript 中使用 any 类型 TypeScript 是 Web 开发人员中最常用的编程语言之一。它具有出色的语言功能&#xff0c;允许我们轻松设计可扩展的应用程序。因此&#xff0c;开发人员倾向于在项目中选择 TypeScript 而不是 JavaScript。 然而&#xff0c;在使用 TypeScr…

git基本概念

一、版本控制概念 1.1 什么是版本控制 1.1.1 手动管理文件版本 1.1.2 版本控制软件 概念&#xff1a;版本控制软件是一个用来记录文件发生的变化&#xff0c;以便将来查阅特定版本修订情况的系统&#xff0c;有时也叫“版本控制系统”。通俗的理解就是把手工管理文件版本的方…

TZOJ 1420 手机短号

答案&#xff1a; #include <stdio.h> #include <string.h> int main() {int n 0;scanf("%d", &n);while (n--) //输入n次{char phone[12];scanf("%s", phone);printf("6%s\n", phone 6); //跳过数组前6个元素&#…

【ONNX】多个ONNX 模型合并为一个模型

ONNX 模型直接合并&#xff0c;输入和输出不一致也可以&#xff0c;各自输入输出各自的 示例代码 import onnxruntime# version : 1.16.0 import onnxdef log_model(model):model_1_outs {o.name for o in model.graph.output}model_1_ins {i.name for i in model.graph.in…

15.oracle的 listagg() WITHIN GROUP () 行转列函数使用

1.使用条件查询 查询部门为20的员工列表 -- 查询部门为20的员工列表 SELECT t.DEPTNO,t.ENAME FROM SCOTT.EMP t where t.DEPTNO 20 ; 效果&#xff1a; 2.使用 listagg() WITHIN GROUP () 将多行合并成一行(比较常用) SELECT T .DEPTNO, listagg (T .ENAME, ,) WIT…

深入理解前端路由:构建现代 Web 应用的基石(下)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

高精度电压源的作用有哪些

高精度电压源是一种能够产生高精度、高稳定性、低噪声的电压信号的设备。其主要作用是提供准确的电压参考信号&#xff0c;以满足各种测试、校准、研发和生产应用的需求。下面安泰电子将详细介绍高精度电压源的作用。 高精度电压源在测量和控制中具有非常重要的作用。在各种物理…

mybatis数据输入-Map类型参数输入

1、建库建表 CREATE DATABASE mybatis-example;USE mybatis-example;CREATE TABLE t_emp(emp_id INT AUTO_INCREMENT,emp_name CHAR(100),emp_salary DOUBLE(10,5),PRIMARY KEY(emp_id) );INSERT INTO t_emp(emp_name,emp_salary) VALUES("tom",200.33); INSERT INTO…

rust持续学习 COW

COW我第一次看见还以为是奶牛 很奇怪是个啥 后来了解到是clone on write 缩写的&#xff0c;大乌龙啊 这个有两种enum,一种是borrow&#xff0c;一种是own rust中&#xff0c;数据读写经常涉及到所有权 这个borrow&#xff0c;很显然&#xff0c;就是不可变借用了 own就是可以写…