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

URL.createObjectURL()

主要区别

  • 通过FileReader.readAsDataURL(file)可以获取一段data:base64的字符串

  • 通过URL.createObjectURL(blob)可以获取当前文件的一个内存URL

执行时机:

  • createObjectURL是同步执行

  • FileReader.readAsDataURL是异步执行

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

URL.createObjectURL()的使用方法,以及object.keys()方法的使用_第1张图片

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、如果有知道其实现底层原理的同学,特别希望能够得到您宝贵的指点,不甚感激。

你可能感兴趣的:(vue.js,javascript,前端,开发语言)