几种图片上传交互处理
常规业务中或多或少涉及到图片上传相关的需求，一般地为了满足用户的交互体验，产品都会要求提供几种不同的图片上传交互，让用户能够通过不同的交互上传图片。在Thinkto中，我们会要求用户提供一张图片，然后才能进行下一步的图像分割操作以进行相关的AI业务流程。常见的图片上传交互有三种：弹窗选择图片上传、粘贴图片上传以及拖拽图片上传，下面针对这三种不同的交互方式分门别类做个介绍和总结。
选择图片上传
交互上用户会点击上传按钮，浏览器弹窗文件系统提供给用户做选择，用户选择自己想要的图片进行上传，当用户选择完成之后，触发图片上传。
原理是借助DOM的input控件，将其类型设置为type="file"。同时，我们会监听input的change事件，触发的时候通过input.files属性获取到图片的File对象。
粘贴图片上传
交互上用户会复制浏览器或本地文件系统中的图片，对于浏览器复制还可能复制图片的url，当用户在上传控件中粘贴的时候，触发图片上传。
原理是监听元素的paste事件，通过evt.clipboardData?.items进一步判断遍历判断其中元素的类型是否是图片类型。对于图片URL我们还需要额外判断是否是URL。如果是图片类型，我们会使用item.getAsFile()进一步拿到图片的File对象。如果是URL我们可以利用fetch之类的方法获取图片数据，拿到其Blob对象之后再将其转换成File对象。
拖拽图片上传
交互上用户会拖拽浏览器或者本地文件系统中的图片，当用户拖拽到上传控件中的时候，触发图片上传。
原理是监听元素的drop事件和dragover事件，通过evt.dataTransfer?.files拿到的图片的File对象。坑点是浏览器默认拖拽图片到界面控件时，会直接打开一个新的Tab然后将图片展示出来，为了避免这个问题，我们需要元素同时监听drop和dragover，然后使用evt.preventDefault()将默认行为禁用掉。
总结
其实无论是哪种方式的交互，图片上传的通用思路就是：拿到File对象 + 上传File对象。不妨大胆推广开来，其他类型的文件上传的操作思路也是如此。不同的是由于用户的交互操作不同，我们需要在这两个阶段处理的事情不一样而已，但最终的思路和结果都是大体相同的。