vue点击上传图片并实现图片预览功能,并实现多张图片放到一个数组中进行后端请求(使用原生input)

一、将 File 对象转成 BASE64 字符串 (FileReader)

<template>
  <div>
    <!-- 用来显示封面的图片 -->
    <!-- <img src="@/assets/images/cover.jpg" alt="" class="cover-img" ref="imgRef" /> -->
    <img :src="previewImg" alt="" class="cover-img" ref="imgRef" />
    <br />
    <!-- 文件选择框,默认被隐藏 -->
    <input @change="coverImgChangeHandler" type="file"  accept="image/*" ref="iptFileRef" hidden/>
    <!-- 选择封面的按钮 -->
    <button type="text" @click="choosecoverImgHandler">+ 选择封面</button>
  </div>
</template>

<script>
// ◆导入默认图片, webpack 就会进行打包
import coverImg from '@/assets/images/cover.jpg'
export default {
  data () {
    return {
      // ◆把默认图片赋值给封面图片显示
      previewImg: coverImg
    }
  },
  methods: {
    // ◆点击选择封面,触发图片选择框的点击事件
    choosecoverImgHandler () {
      this.$refs.iptFileRef.click()
    },
    // ◆图片选择框的 change 事件触发
    coverImgChangeHandler (e) {
      console.log(e.target.files)
      // 1.获取用户选择的文件对象
      const files = e.target.files
      // 2.判断用户是否选择了文件对象
      if (files.length === 0) {
        // 2.1用户没有选择图片(使用默认图片)
        // 法1
        // this.$refs.imgRef.src = coverImg
        // 法2
        this.previewImg = coverImg
      } else {
        // 2.2用户选择了图片(使用选择的图片)
        // ◆将 File 对象 转成 BASE64 字符串 
        // 1.创建 FileReader 对象
        const fr = new FileReader()
        // 2.调用 readAsDataURL 函数,读取文件内容
        fr.readAsDataURL(files[0])
        // 3.监听 fr 的 onload 事件
        fr.onload = (e) => {
          // 通过 e.target.result 获取到读取的结果,值是 BASE64 格式的字符串
          // 法1
          // this.$refs.imgRef.src = e.target.result
          // 法2
          this.previewImg = e.target.result
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
// 设置图片封面的宽高
.cover-img {
  width: 400px;
  height: 280px;
  object-fit: cover;
}
</style>

二、将 File 对象转成 url

<template>
  <div>
    <!-- 用来显示封面的图片 -->
    <img :src="previewImg" alt="" class="cover-img" ref="imgRef" />
    <br />
    <!-- 文件选择框,默认被隐藏 -->
    <input @change="coverImgChangeHandler" type="file"  accept="image/*" ref="iptFileRef" hidden/>
    <!-- 选择封面的按钮 -->
    <button type="text" @click="choosecoverImgHandler">+ 选择封面</button>
  </div>
</template>

<script>
// ◆导入默认图片, webpack 就会进行打包
import coverImg from '@/assets/images/cover.jpg'
export default {
  data () {
    return {
      // ◆把默认图片赋值给封面图片显示
      previewImg: coverImg
    }
  },
  methods: {
    // ◆点击选择封面,触发图片选择框的点击事件
    choosecoverImgHandler () {
      this.$refs.iptFileRef.click()
    },
    // ◆图片选择框的 change 事件触发
    coverImgChangeHandler (e) {
      console.log(e.target.files)
      // 1.获取用户选择的文件对象
      const files = e.target.files
      // 2.判断用户是否选择了文件对象
      if (files.length === 0) {
        // 2.1用户没有选择图片(使用默认图片)
        this.previewImg = coverImg
      } else {
        // 2.2用户选择了图片(使用选择的图片)
        // 将 File 对象转成 url
        this.previewImg = URL.createObjectURL(files[0])
      }
    }
  }
}
</script>

<style lang="less" scoped>
// 设置图片封面的宽高
.cover-img {
  width: 400px;
  height: 280px;
  object-fit: cover;
}
</style>

三、总结与思考

总结

  • 设置默认图片:将图片作为模块导入,定义变量接收,赋值给图片的 src
    • 其他方法:使用自定义指令设置默认图片、在模板中使用 v-if
  • 点击上传图片按钮,触发图片输入框的 click 事件
    • 隐藏图片输入框:hiddendisplay:none
  • 绑定图片输入框 的 change 事件,获取文件对象 e.target.files
  • 判断 e.target.fileslength
    • 长度为0:用户取消选择图片,传给后台的数据就是 null,把默认图片赋值给当前预览区
    • 长度为1:用户确认选择图片,把 e.target.files[0]传给后台
  • 用户选择了图片之后,预览图片的方法:
    • 将获取的文件对象转成 BASE64 字符串:小图片
    • 将获取的文件对象转成 url:大图片

思考

为什么当用户选择了图片之后,我们不把 e.target.files[0] 直接赋值给预览图片的 srcpreviewImg,而传给后台就可以?

首先src 只支持 urlBASE64 字符串,而当后台需要的数据类型是 Blob 时,我们就可以直接把 e.target.files[0] 传给它,因为 File 就是 Blob 的子类,关系就像 ArrayObject 的关系一样。

进阶

一般进行身份认证时会上传身份证正反面,如果这时后端要求将两张身份证图片放到一个数组中进行请求应该如何做到呢?

首先,我们已经通过输入框 的 change 事件,获取到了文件对象 e.target.files e.target.files[0]为单个文件,将拿到的单个文件push到新的数组中,以下代码为vue3语法实现

//显示图片(图片预览方法)
export const readUrl=(file,preImg)=>{
    const fr = new FileReader()
    fr.readAsDataURL(file)
    fr.onload = (e) => {
        preImg.value = e.target.result//preImg为预览图片的数据
    }
}
//此为input框的change事件,以此拿到单个文件
const coverImgChangeHandler= (e)=> {
    form.value.authFiles.push(e.target.files[0])
    readUrl(e.target.files[0],previewImg)
}
//提交认证按钮
const submitForm =async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            let formData = new FormData();
            //此处为重点!!记得遍历后再append,直接append报错
            form.value.authFiles.forEach((file) =>{formData.append('authFiles',file)})
            // console.log(formData)
            axios.post('url',formData
            ).then((res) => {
                console.log(res)
            }).catch(err => {
                // console.log(err);
            })
        } else {
            // console.log('提交失败', fields)
        }
    })

}

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

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

相关文章

创新实训2024.04.11日志:self-instruct生成指令

1. 参考文献 代码&#xff1a;https://github.com/yizhongw/self-instruct论文&#xff1a;https://arxiv.org/abs/2212.10560 2. 前沿论文阅读 2.1. self-instruct技术的优势 作者在文章中提到&#xff1a; The recent NLP literature has witnessed a tremendous amount …

python基础——python包【创建和导入,下载第三方包】

&#x1f4dd;前言&#xff1a; 在上一篇文章python基础——模块中&#xff0c;我们讲解了有关python模块的相关知识&#xff0c;这篇文章我们进一步讲解用于储存多个模块文件的python包&#xff1a; 1&#xff0c;什么是python包 2&#xff0c;如何创建和导入python包 3&#…

linux安装dubboAdmin

1.环境准备&#xff1a; jdk-8u391-linux-x64apache-maven-3.9.6apache-tomcat-8.5.100 2.安装注册中心zookeeper zookeeper的安装看我的另一篇文章&#xff0c;安装完成后保持启动状态 linux安装Zookeeper的详细步骤-CSDN博客 3.安装dubboadmin 源码下载地址&#xff1a;R…

Python学习从0开始——项目一day01爬虫(二)

Python学习从0开始——项目一day01爬虫&#xff08;二&#xff09; 一、解析response数据二、json转换三、文件保存四、存储json对象五、完整代码 上一篇 一、解析response数据 在已经知道我们获取图片的最终URL存在于请求响应response中&#xff0c;下一步的重点就放在解析re…

SQLite数据库文件格式(十五)

返回&#xff1a;SQLite—系列文章目录 上一篇:SQLite 4.9的虚拟表机制(十四) 下一篇&#xff1a;SQLite超详细的编译时选项&#xff08;十六&#xff09; ► 目录 本文档描述和定义磁盘上的数据库文件 自 SQLite 以来所有版本使用的格式 版本 3.0.0 &#xff08;2004-06-18…

Java数据结构二叉树

概念 一棵二叉树是结点的一个有限集合&#xff0c;该集合&#xff1a; 1. 或者为空 2. 或者是由一个根节点加上两棵别称为左子树和右子树的二叉树组成。 从上图可以看出&#xff1a; 1. 二叉树不存在度大于2的结点 2. 二叉树的子树有左右之分&#xff0c;次序不能颠倒&#x…

设计模式代码实战-抽象工厂模式

1、问题描述 小明家新开了两个工厂用来生产家具&#xff0c;一个生产现代风格的沙发和椅子&#xff0c;一个生产古典风格的沙发和椅子&#xff0c;现在工厂收到了一笔订单&#xff0c;请你帮他设计一个系统&#xff0c;描述订单需要生产家具的信息。 输入试例&#xff1a; 3 …

2024-04-10 作业

作业要求&#xff1a; 1> 思维导图 2> 作业1&#xff1a; 作业2&#xff1a; 运行代码&#xff1a; main.cpp #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QDebug> #include <QTimerEvent> #include <QTime> #include &l…

YOLOv8草莓生长状态(灰叶病缺钙需要肥料)检测系统(python开发,带有训练模型,可以重新训练,并有Pyqt5界面可视化)

本次检测系统&#xff0c;不仅可以检测图片、视频或摄像头当中出现的草莓叶子是否有灰叶病&#xff0c;还可以检测出草莓叶是否缺钙、是否需要施肥等状态。基于最新的YOLO-v8训练的草莓生长状态检测模型和完整的python代码以及草莓的训练数据&#xff0c;下载后即可运行&#x…

Linux内核errno-base.h源码分析

上次写过一个博客&#xff0c;主要关于内核错误相关的源码分析&#xff08;链接&#xff09;&#xff0c;最近突然发现上次的分析不完善&#xff0c;因此本次完善相关分析。 Linux内核中经常见到一些返回值&#xff0c;如-12&#xff0c;比如下面是我遇到过的一个截图&#xff…

代理模式:控制对象访问的智能方式

在面向对象的软件开发中&#xff0c;代理模式是一种结构型设计模式&#xff0c;它为其他对象提供一个代理或占位符以控制对这个对象的访问。代理模式在实现权限控制、延迟初始化和远程对象访问等方面非常有用。本文将详细介绍代理模式的定义、实现、应用场景以及优缺点&#xf…

制作一个OpenHarmony视频播放器

简介 媒体子系统是 OpenHarmony 中重要的子系统&#xff0c;可以提供音视频播放能力。媒体子系统为开发者提供一套简单且易于理解的接口&#xff0c;使得开发者能够方便接入系统并使用系统的媒体资源。媒体子系统提供以下常用功能&#xff1a; 音视频播放&#xff08;AVPlaye…

TestNG执行测试用例的方法

TestNG是一个非常好用d自动化测试框架&#xff0c;对于经常使用selenium做web端UI测试的童鞋来说是个不错的工具。 具备基本常识的测试童鞋们&#xff0c;可能需要知道存在即合理&#xff0c;存在即有用的道理。任何一个工具&#xff0c;或者一件事的存在如果令人得不到益处&am…

前端大屏项目适配方法

要在F11全屏模式下查看 方法一&#xff0c;rem font-size 动态设置HTML根字体大小 和 body 字体大小&#xff08;lib_flexible.js&#xff09; 将设计稿的宽&#xff08;1920&#xff09;平均分成 24 等份&#xff0c; 每一份为 80px。HTML字体大小就设置为 80 px&#xff…

C/C++ 配置 jemalloc 的一些选项,处理一些疑似内存泄漏的问题。

在 jemalloc 之中有三种配置 jemalloc 选项的一些方式。 1、修改选项代码默认值&#xff08;重新编译&#xff09; 2、修改环境变量 MALLOC_CONF&#xff0c;并重启应用程序 注意&#xff1a; 仅支持 opt. 节配置选项 export MALLOC_CONF"retain:true,dirty_decay_ms:2…

什么是图神经网络?

什么是图神经网络&#xff1f; GNN 将深度学习的预测能力应用于丰富的数据结构&#xff0c;这些数据结构将对象及其关系描述为图中由线连接的点。 当两种技术融合时&#xff0c;它们可以创造出新奇而美妙的东西——比如手机和浏览器融合在一起打造智能手机。 如今&#xff0…

初学网络编程

网络编程是指编写能够在网络环境中运行&#xff0c;进行数据通信的程序的过程。它涵盖了从建立网络连接、发送和接收数据&#xff0c;到关闭连接等一系列操作。网络编程是开发网络应用程序的基础&#xff0c;它使得不同的计算机和设备能够通过网络进行数据交换和通信。 三个核…

《手把手教你》系列基础篇(八十三)-java+ selenium自动化测试-框架设计基础-TestNG测试报告-下篇(详解教程)

宏哥微信粉丝群&#xff1a;https://bbs.csdn.net/topics/618423372 有兴趣的可以扫码加入 1.简介 其实前边好像简单的提到过测试报告&#xff0c;宏哥觉得这部分比较重要&#xff0c;就着重讲解和介绍一下。报告是任何测试执行中最重要的部分&#xff0c;因为它可以帮助用户了…

Flask快速搭建文件上传服务与接口

说明&#xff1a;仅供学习使用&#xff0c;请勿用于非法用途&#xff0c;若有侵权&#xff0c;请联系博主删除 作者&#xff1a;zhu6201976 一、需求背景 前端通过浏览器&#xff0c;访问后端服务器地址&#xff0c;将目标文件进行上传。 访问地址&#xff1a;http://127.0.0…

Java 中文官方教程 2022 版(三)

原文&#xff1a;docs.oracle.com/javase/tutorial/reallybigindex.html 对象 原文&#xff1a;docs.oracle.com/javase/tutorial/java/javaOO/objects.html 一个典型的 Java 程序会创建许多对象&#xff0c;正如您所知&#xff0c;这些对象通过调用方法进行交互。通过这些对象…