前言

在业务中,图片的预览及上传十分常见,主要分为二进制及base64字符串两种处理方式.

结构上的准备

这里使用vue举例:

1. 准备一个input框及一个按钮

2. input设置file的type类型,并使用display:none 隐藏起来,注册input框的onchange事件

3. 给按钮注册点击事件,使其点击时触发input框的点击事件

<!-- 渲染一个被隐藏的文件选择框，只允许选中图片文件 -->
        <input type="file" style="display: none" accept="image/*" ref="iptRef" @change="onFileChange" />
        <el-button type="primary" icon="el-icon-plus" @click="$refs.iptRef.click()" >选择图片</el-button
        >

处理方法一: 二进制

1. 预览

主要分为三个步骤

(1) 获取选择的文件this.file[0]

(2) 把文件生成url路径 URL.createObject()

(3) 把生成的url赋值给img标签的src属性

//获取文件file
let file = e.target.files[0]
      if (file) {
          //把文件生成url路径并赋值给src
        this.$refs.imgRef.src = URL.createObjectURL(file)
      }

2. 提交

主要分为三个步骤

(1) 创建formdata

(2) 调用append('参数名',file对象)

(3) formdata发送给服务器

//创建formdata
let fd = new FormData()
//遍历数组,将所有属性值及其对应属性名用append添加到fd里
      for (const key in this.addForm) {
        fd.append(key, this.addForm[key])
      }

处理方法二: base64

1. 预览

(1) 获取文件this.file[0]

(2) 内置对象FileReader读取文件,得到base64

(3) 把生成的base64赋值给img标签src属性

//获取文件file
let file = e.target.files[0]
//内置对象FileReader读取文件
      const fr = new FileReader()
 //转为base64
      fr.readAsDataURL(file)
 // FileReader异步,所以不能直接赋值,需要利用fileReader的onload事件,该事件在读取操作完成时触发
      fr.onload = e => {
 // 将生成的base64赋值给img的src属性
        this.$refs.imgRef.src = e.target.result
      }

2. 上传

直接提交字符串即可

总结

预览时两种方法首先都需要给input框添加onchange事件,通过this.file[0]获取选择的文件,而二进制方法是利用URL.createObject()生成URL赋值给img的src,但base64是利用FileReader生成base64赋值给img的src属性；

提交时二进制需要利用FormData处理请求头,而base64可以直接提交字符串