图形验证码核心代码 vue3

Blob（Binary Large Object，二进制大对象）是 JavaScript 中用于存储大量二进制数据的对象。它可以存储文件、图片、音频、视频等大量的原始数据，并且这些数据是不可变的。Blob 的主要作用是允许我们在前端处理和生成文件内容，比如下载文件、上传文件、或在页面中显示文件。

Blob 的作用

存储二进制数据：Blob 可以存储任何类型的二进制数据，包括文本、图像、音频、视频、Excel 文件等。

文件处理：在前端应用中，Blob 常用于将 JavaScript 数据转换为文件对象，可以用来下载文件或通过表单上传文件。

通过 URL 访问数据：我们可以使用 URL.createObjectURL(blob) 创建一个指向 Blob 对象的临时 URL，这个 URL 可以用作图片、文件下载链接或其他需要访问数据的地方。

Blob 的构造

构造一个 Blob 对象时，可以传递一个数据的数组，并指定数据的类型（MIME 类型），例如：

let blob = new Blob([data], { type: 'text/plain' });

• [data]：这是要存储的数据，可以是文本、二进制数组等。
• { type: 'text/plain' }：指定数据的 MIME 类型，告诉浏览器如何处理这个数据。在这个例子中，text/plain 表示这是一个普通的文本文件。

总结

• Blob 是前端处理大数据对象的工具，常用于生成文件、处理图片、音视频等数据。
• 它通过将数据转换成可下载或显示的文件格式来简化文件处理过程。

举例:

api中

export const captchaImage = (params):Promise<ArrayBuffer> => {
  return request({
    url:'/captcha/image',
    responseType: 'arraybuffer',
    params
  })
}

请求核心代码

// 验证码
const getCaptcha = async() => {
  const key:string = new Date().getTime().toString() //时间戳
  ruleForm.key = key
  let res = await captchaImage({key})
  let blob = new Blob([res],{type:'application/vnd.ms-excel'});
  let imgUrl = URL.createObjectURL( blob );
  captchaUrl.value = imgUrl;
}
// 生命周期
onBeforeMount(() => {
  getCaptcha()
})

渲染层代码

<el-form-item>
      <div class="boxCode">
        <el-input
          v-model="ruleForm.captcha"
          prefix-icon="CircleCheck"
          clearable
          placeholder="请输入验证码"
        ></el-input>
        <el-image
          :src="captchaUrl"
          @click="getCaptcha"
          class="code"
        ></el-image>
      </div>
    </el-form-item>