URL.createObjectURL()的使用方法,以及object.keys()方法的使用

URL.createObjectURL()主要区别通过FileReader.readAsDataURL(file)可以获取一段data:base64的字符串通过URL.createObjectURL(blob)可以获取当前文件的一个内存URL执行时机：createObjectURL是同步执行FileReader.readAsDataURL是异步执行工作中经常需要进行对图片的转码操作可以利用new

nz一只肥猫

3575人浏览 · 2022-05-23 20:02:50

nz一只肥猫 · 2022-05-23 20:02:50 发布

URL.createObjectURL()

主要区别

通过FileReader.readAsDataURL(file)可以获取一段data:base64的字符串
通过URL.createObjectURL(blob)可以获取当前文件的一个内存URL

执行时机：

createObjectURL是同步执行
FileReader.readAsDataURL是异步执行

工作中经常需要进行对图片的转码操作可以利用new Fromdate 转码利用URL.createObjectURL(blob)获取后台给的路径图片奉上

object.keys()

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for…in 循环遍历该对象时返回的顺序一致。

工作中一般很少用for…in,自我感觉很low Object.keys() 是对对象的属性/键进行循环,返回一个数组,然后在对这个数组进行操作,当然也不是说for…in不好,毕竟是原生,也是基础,存在即合理

this.pubForm.state = state
      // 手动校验
      this.$refs.pubFormRef.validate((vali) => {
        if (!vali) return this.$message.warning('请完善信息')
        if (!this.pubForm.cover_img) return this.$message.warning('请设置封面')
        // 数据类型转化
        const fd = new FormData()
        // 方法1
        // for (const key in this.pubForm) {
        //   fd.append(key, this.pubForm[key])
        // }
        // 方法二
        // Object.keys(对象) 得到一个数组 数组中是对象中所有的属性名
        // console.log(Object.keys(this.pubForm))  // ['title', 'cate_id', 'cover_img', 'state', 'content']
        Object.keys(this.pubForm).forEach((item) =>
          fd.append(item, this.pubForm[item])
          )

注：
1、在学习 Object.keys() 的时候，可以结合 Object.value() , for…in，for…of 这几个方法多方印证互相补充学习。
2、关于本篇文章，如果有错误的地方希望各位同学能够指正，谢谢。
3、关于其底层原理，暂时还不清楚，希望后期能够给补上，在此给各位道一声抱歉，请见谅。
4、如果有知道其实现底层原理的同学，特别希望能够得到您宝贵的指点，不甚感激。