.input{显示：无；}constinputRef=useRef(null)constclick=()=>{inputRef.current&&inputRef.current.click()}设置input元素样式display:none，隐藏input元素点击父元素的事件处理程序,并调用input元素的click方法效果：点击Thisarea，打开一个文件选择器。2、显示选中图片的缩略图经常有以下场景：用户点击上面的图片+范围后，出现文件选择器——用户选择一张图片——图片的缩略图显示在页面上。（显示的缩略图可以是任意大小，可以自定义）其实就是一个图片文件如何转换成img元素的src来显示的问题。我们目前知道从input元素获取的图片文件是一个File对象，里面会包含文件名等信息。那么如何获取元素可用的src属性呢？有以下两种方法：2.1FileReader读取文件内容FileReader：FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容。使用File或Blob对象指定要读取的文件或数据。File对象可以来自用户在元素上选择文件后返回的FileList对象，也可以来自拖放操作生成的DataTransfer对象用法：constreader=newwindow.FileReader()得到一个fileReader对象reader.result一个属性，只读，表示读取的文件内容。请注意，此属性仅在读取操作完成后才有效。读取的数据格式取决于用于启动读取操作的方法。reader.readAsDataURL(blob)开始读取指定的Blob或File对象。当读取操作完成后，result属性会包含一个data:URL格式的Base64字符串来表示读取文件的内容。当我们想在src中使用这个数据，在img或者其他标签中使用时，就可以使用这个方法。//加载事件，读取操作完成时触发。在这个处理函数中可以得到读取结果reader.resultreader.addEventListener('load',()=>{console.log('loadingcomplete')})例子：const[readFile,setReadFile]=useState(null)consthandleFileChange=(e)=>{constfiles=e.target.filesconstfile=files[0]constreader=newwindow.FileReader()reader.readAsDataURL(file)reader.addEventListener('load',()=>{constresult=reader.resultsetReadFile(result)})}return(readFile&&)handleFileChange是获取文件列表的input元素的onChange事件处理函数，取第一个文件作为例如，创建一个reader阅读器，并监听load事件，当阅读完成后，将结果作为img元素的src。然后开始读取URL格式。结果是读取文件时，readFile会有值，预览图片文件和fileReader2.2使用对象URL引用文件对象URL.createObjectURL()用法：consturl=window.URL.createObjectURL(file)功能：创建一个可以引用任何数据的URL字符串。您还可以引用用户本地计算机上的文件对象。因此，也可以使用对象URL来显示图片，只要将获取到的url对象赋值给img.src属性即可。下图是打印出来的文件对象和获取到的对象URL。3.上传文件到服务器显示用户选择的文件的缩略图后，如果需要将图片上传到服务器，需要发送http请求。发送http请求可以使用XMLHttpRequest或者fetchAPI3.1XMLHttpRequestXMLHttpRequest使用XMLHttpRequest发送文件数据时，一般先使用FormData对象处理图片文件。FormData对象用于将数据编译成键值对，以便可以使用XMLHttpRequest发送数据。FormData以图片为例：constdata=newwindow.FormData()data.append('file',file)//file是一个文件对象constxhr=newXMLHttpRequest()...xhr.send(data)reference链接：全过程