Vue+VantUI项目Uploader 组件中上传base64码图片遇到的问题

图片上传处理

base64转换

后端返回数据后回填显示图片

---

前言

由于公司要做一个访客预约的H5移动端的小项目，我选择用vue+vantUI完成，在项目开发中遇到了图片上传回填显示的问题，以及在使用vantUI的过程中对它的表单组件不熟悉踩过不少坑。其中表单+图片的上传最为困难，再加上后端用python写接口导致不稳定问题，且后端不做图片的处理，无法给前端返回图片地址，前端只能上传base64编码图片其后端返回也是base64编码图片，让我前端这边遇到不少困难。为避免下次不再踩坑，做一下总结。

---

一、图片base64是什么？

• 图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。
• 目前绝大多数现代浏览器都支持一种名为 Data URLs 的特性，允许使用 base64 对图片或其他文件的二进制数据进行编码，将其作为文本 字符串嵌入网页中。Data URLs 由四个部分组成：前缀（data:）、指示数据类型的 MIME 类型、如果非文本则为可选的 base64 标记、数据本身：

data:[<mediatype>][;base64],<data>

• mediatype 是个 MIME 类型的字符串，例如 “image/jpeg” 表示 JPEG 图像文件。如果被省略，则默认值为 text/plain;charset=US-ASCII。如果数据是文本类型，你可以直接将文本嵌入（根据文档类型，使用合适的实体字符或转义字符）。如果是二进制数据，你可以将数据进行 base64 编码之后再进行嵌入。比如嵌入一张图片：

<img alt="logo" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...">

二、图片上传处理

1.图片大小限制

代码如下（示例）：

   <!--个人图片上传-->
        <van-field name="pic" label="个人图片" required>
          <template #input>
            <van-uploader
              v-model="headpic"
              max-count="1"
              accept="image/*"
              :before-read="beforeRead"
              :after-read="afterRead"
            />
          </template>
        </van-field>

上传前置处理(before-read)</