前端开发每日小收获

记录开发过程中的小收获或者小技巧，解决一些小问题的方式等，勿以收获小而不为，常更！！！

• 问题（解决方法在下面）：

开发联调过程中，一个请求设备封面的接口 ，返回的数据格式是个图片

接口要求信息：

• get请求，带两个id的参数
• 带token
• 我要把这照片放到页面中img标签中显示

解决方法：

写个组件

import React, { useEffect, useState } from 'react'
import { cache } from '@cloud-app-dev/utils'
import noData from '@src/assets/imgs/nocz.png'
//这里主要意义就是取token， cache这个是封装的一个函数
const getHeader = () => ({ Authorization: cache.getCache('token', 'session') });

function ScreenShot({ deviceId, channelId }) {
    const [state, setState] = useState({ url: "" })
    useEffect(() => {
        console.log(channelId,'channelId')
        if (!channelId && !deviceId ) {
            return
        }
        //在这里来拼接口的url                                                                                                           带上token
        fetch(`/api/v1/dig/devices/screenshot?device_id=${deviceId}&channel_id=${channelId}`, { headers: getHeader() }).then(async res => {
            if(res.status===400){
                return
            }
            //返回的是流，用fetch的内置函数blob()转一下
            const blob = await res.blob()
            //再转为URL
            const url = URL.createObjectURL(blob)
            //存！
            setState(old => ({ ...old, url }))
        })
    }, [deviceId, channelId])
                             //这里直接这样用就可以了，就能够再页面中显示了
    return state.url?<img src={state.url}></img>:<img style={{ width: '100%', height: '100%' }} src={noData} alt="" />
}


export default ScreenShot


使用：
<ScreenShot channelId={item.channel_id} deviceId={device_id}/>

总结： 1.对fetch，blob不了解 2.解决问题方向错误，由于请求用的都是‘fetch-like-axios’，也不知道fetch就有内置的blob函数，通过new Blob()绕了一圈转成功了，但是拼到img标签上图片没显示，就一直纠结可能转错了 3.下去多了解一下http请求，以及请求方式，fetch，blob等

• bug:毛玻璃这种模糊背景与高保真不一致（测试看不到模糊样式，我用的谷歌最新，测试用的谷歌72） 原因：我使用CSS样式backdrop-filter: blur(10px); 实现的，但是这个属性只兼容谷歌76以上，并切不兼容火狐浏览器。但是可以使用filter属性进行兼容，backdrop-filter 和 filter还是有很多区别，filter实现相对麻烦并且有一定缺陷不如backdrop-filter。

• 导入接口联调，如图：

使用ant中的上传组件（uoload）,使用其中属性：

//手动拦截文件上传，自定义上传方式
customRequest:(file) => adddevice(file)，
//限制文件类型
accept: ".xlsx",

自定义上传方式

const adddevice = (value) => {
		const formData = new FormData()
		formData.append('xlsx', value.file)
		console.log(formData,44444)  //这里打印永远是空
		Service.batchimport(formData).then(res => {
			if (res.code === 200) {
				.......
			}
		}).catch(error => {
				console.log(error)
		})
	}

对请求中的formData没听过，以为和Fome组件的formdata是一样的，一开始直接formdata={xlsx：file}，接口报错，其次，这种请求需要设置请求头，"Content-Type": "multipart/form-data"，最后在打印哪里纠结半天，因为哪里打印出来是空一直就没有写下面的逻辑。

原因：FormData是一种特殊的对象类型，不可序列化，因此使用console.log()直接打印显示的是FormData原型 解决：遍历FormData，逐个打印键值对

form.forEach((key, val) => {
	console.log("key %s: value %s", key, val)
})

• 使用antd中的Form组件，Fome.Item标签下只接受一个children时，才能够使用它的默认值，校验，更改某个表单值等等属性。但是遇到这种：

1.定义个组件，暴露onchonge方法，和value
 	const MySwitch = ({ value, onChange }) => {
 	    return (
 	      <div >
 	        <Switch checked={value} onChange={onChange} />
 	        <div >开启后此订阅任务订阅类别数据将共享给视频云。</div>
 	      </div>
 	    );
 	  };
2.使用
   <Form.Item
     label={<LabelVal title={'数据推送'} required={false} />}
     initialValue={false}
     name="resourceFeatureDeclare"
     rules={[{ required: true, message: '请选择返回结果特征值约定' }]}
   >
     <MySwitch />
   </Form.Item>

这样就可以表单在多个元素是，一样可以使用ant中form的便利了！！！

• 滑动验证插件不兼容，手写滑动验证时，由于红色区域是img标签，点击红色区域img鼠标拖动时，这个img会被拖，img会作为鼠标事件元素，而中断我原本的拖拽事件，使得不好用，使用css中：pointer-event属性，可以指定在什么情况下元素可以成为鼠标事件，在img中添加css属性pointer-event：none；可以解决！
• React中配置js，ts的@src路径

// js:在package.json同级下创建jsconfig.json
   	 {
   	  "compilerOptions": {
   	    "experimentalDecorators": true,
   	    "baseUrl": "src",
   	    "paths": {
   	      "src/*": ["./src/*"],
   	      "@src/*": ["./src/*"]
   	    },
   	    "jsx": "react"
   	  },
   	  "exclude": ["node_modules", "public/static", "public/library", "build"],
   	  //重启
   	}

//ts：在package.json同级下创建tsPaths.json
//tsPaths.json:
{
   "compilerOptions": {
   	"baseUrl": "./",
   	"paths": {
   		"@src/*": [
   			"src/*"
   		]
   	}
   }
}

在tsconfig.json中加入一行（"extends": "./tsPaths.json"）