倒计时验证码(localStorage)、json转表单

1-倒计时验证码

<template>
  <div>
    <!-- 发送验证码按钮 -->
    <el-button slot="append" @click="sendAuthCode" :disabled="countdown > 0" :loading="countdown > 0">
      {{ countdown > 0 ? countdown + 's' : buttonText }}
    </el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      countdown: 0, // 倒计时秒数
      buttonText: '发送验证码', // 按钮文本
      timer: null // 定时器
    };
  },
  mounted() {
    // 从 localStorage 中读取倒计时值
    const storedCountdown = localStorage.getItem('countdown');
    if (storedCountdown) {
      this.countdown = parseInt(storedCountdown);
      if (this.countdown > 0) {
        this.startCountdown();
      }
    }
  },
  beforeUnmount() {
    this.clearTimer();
  },
  methods: {
    sendAuthCode() {
      // 如果倒计时仍在进行中，则不执行发送验证码操作
      if (this.countdown > 0) {
        return;
      }

      // 设置初始倒计时秒数为 10
      this.countdown = 10;
      // 将倒计时值存储在 localStorage 中
      localStorage.setItem('countdown', this.countdown);
      // 开始倒计时
      this.startCountdown();
    },
    startCountdown() {
      // 清除之前的定时器
      this.clearTimer();

      // 创建新的定时器，每秒更新倒计时秒数
      this.timer = setInterval(() => {
        // 减少倒计时秒数
        this.countdown--;

        // 检查倒计时是否结束
        if (this.countdown <= 0) {
          // 倒计时结束，清除定时器
          this.clearTimer();
          // 移除 localStorage 中的倒计时值
          localStorage.removeItem('countdown');
          // 更新按钮文本为 "重新发送"
          this.buttonText = '重新发送';
        } else {
          // 更新 localStorage 中的倒计时值
          localStorage.setItem('countdown', this.countdown);
        }
      }, 1000);
    },
    clearTimer() {
      // 清除定时器
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    }
  }
};
</script>

2-json转表单

逐个转换

let obj = {
  id: "001",
  name: "小蓝",
  age: "18",
  sex: "女",
};
const formData = new FormData();
formData.append("id", obj.id);
formData.append("name", obj.name);
formData.append("age", obj.age);
formData.append("sex", obj.sex);
console.log(formData);

所有属性值转换

let obj = {
  id: "001",
  name: "小蓝",
  age: "18",
  sex: "女",
};
const formData = new FormData();
Object.keys(obj).map((key) => {
  formData.append(key, obj[key]);
});
console.log(formData);

3-formData 对象转 json

var jsonObj = {};
formData.forEach((value, key) => (jsonObj[key] = value));

4-拓展 – base64 和文件流互转

文件流转 base64

<template>
  <div>
    <input type="file" @change="handleFileChange" />
  </div>
</template>

<script>
export default {
  methods: {
    handleFileChange(event) {
      // 获取用户选择的文件
      const file = event.target.files[0];
      // 创建一个FileReader对象
      const reader = new FileReader();
      // 当文件读取完成后触发的事件处理程序
      reader.onload = () => {
        // 获取文件流
        const base64 = reader.result;
        // 在这里进行base64编码的处理
        console.log(base64);
      };
      // 读取文件流
      reader.readAsDataURL(file);
    },
  },
};
</script>

 

base64 转文件流

<template>
  <div>
  </div>
</template>

<script>
export default {
  mounted() {
    // Base64字符串;
    let base64String = "data:image/png;base64"
    base64String = this.convertBase64ToBlob(base64String);
    console.log(base64String);
  },
  methods: {
    convertBase64ToBlob(base64String) {
      // 将Base64解码为二进制数据
      const byteCharacters = atob(base64String.split(",")[1]);
      // 创建一个Uint8Array来存储二进制数据
      const byteArrays = new Uint8Array(byteCharacters.length);
      for (let i = 0; i < byteCharacters.length; i++) {
        byteArrays[i] = byteCharacters.charCodeAt(i);
      }
      // 创建Blob对象
      const blob = new Blob([byteArrays], { type: "text/plain" });
      // 将Blob对象转换为File对象
      const file = new File([blob], "filename", { type: "text/plain" });
      return file;
    },
  },
};
</script>