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

郏佐

2023-12-01

图片上传处理

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)

通过传入 beforeRead 函数可以在上传前进行校验和处理，返回 true 表示校验通过，返回 false 表示校验失败。支持返回 Promise 对 file 对象进行自定义处理，例如压缩图片。

 beforeRead(file) {
      if (file.type !== "image/jpeg") {
        this.$toast("请上传jpg格式图片");
        return false;
      }
       return true;
    },

2.图片压缩上传（简单处理）

上传前置处理（after-read）

文件上传完毕后会触发 after-read 回调函数，获取到对应的 file 对象。
after-read方法里面的 file 包含很多内容、可以直接使用。
file.content 即为base64 格式的图片
file.file 为未转化格式的文件
file.file.size 为未转化格式的文件的大小

 afterRead(file) {
  console.log(file);//图片对象
      this.$toast.loading("识别中");
      if (file.file.size > 1024 * 1024) {
        // 生成canvas
        let canvas = document.createElement("canvas");
        let context = canvas.getContext("2d");
        let img = new Image();
        // 指定图片的DataURL(图片的base64编码数据)
        img.src = file.content;
        console.log(img.src);
        img.onload = () => {
          //画布大小
          let w = canvas.width;
          let h = canvas.height;
          context.drawImage(img, 0, 0, w, h);
          file.content = canvas.toDataURL(file.file.type, 1);
          console.log(file.content);
          // replace消除前缀，获取完整的base64码
          // this.outForm.facep[0]=file.content.replace(/^data:image\/\w+;base64,/, '')
          this.outForm.facep = file.content;
        };
      } else {
        this.outForm.facep = file.content;
         console.log(file);//查看未压缩的图片对象
      }
    }

3.base64转换图片

//base64转图
        var base64Img = result.data;//后端传回来的数据
        var imgFile = this.base64ImgtoFile(base64Img);
        // console.log(imgFile);//base64把图片转成文件对象
//把base64转file
    base64ImgtoFile(dataurl, filename = "file") {
      let arr = dataurl.split(",");
      let mime = arr[0].match(/:(.*?);/)[1];
      let suffix = mime.split("/")[1];
      let bstr = atob(arr[1]);
      let n = bstr.length;
      let u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], `${filename}.${suffix}`, {
        type: mime,
      });
    },

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

    //获取个人头像
    async getFacePicture() {
      let param = {
        picname: this.outForm.facep,
      };
      const result = await this.$service.getFacePicture(param);
      if (result.code === 1) {
        console.log(result.data);//后端返回base64
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明是否为一个图片
        this.headpic.push({url:"result.data", isImage: true})//回填
      }
    },

总结

以上就是今天要讲的内容，vantUI图片上传以及处理问题，主要是为了避坑。

参考文章

https://zhuanlan.zhihu.com/p/146565620
https://blog.csdn.net/webxiaoma/article/details/70053444
https://blog.csdn.net/KLS_CSDN/article/details/107086343