React文件及头像上传

文件上传

React文件上传推荐使用ant-design的upload组件，它提供了多种样式给我们使用，还支持拖拽上传。文档示例很全，这里不多说明了。

地址：https://ant.design/components/upload-cn/

然后这里说一下我使用时碰到的问题：

同时上传多个文件

可以重写beforeUpload方法，将文件保存在fileList中，然后返回false，停止upload默认上传。

点击下载附件

upload组件提供多种展示已上传附件列表的样式，但对于图片等浏览器可以打开的文件，想点击下载，就需要使用a标签的download属性，指定属性值为文件名就好了。

附件名

由于附件名会重复，所以在后端会重命名一个随机字符串。但我们的附件下载是直接请求附件服务器，不走后端。这样就存在下载下来的附件名是乱码的问题，这时我们就可以使用上面说的download属性对下载下来的附件重命名。

但如果前端地址和附件服务器不在同一个域下，就会出现跨域问题，为了安全浏览器在跨域请求时是不支持a标签的download属性的。我的解决办法是后端存储时不对文件重命名，而是每次都新建一个文件夹，文件夹名字是随机字符串，里面只存一个附件。这样虽然很笨，但目前也就想到这个解决办法。

头像上传

头像上传基础的上传组件依然使用upload组件，然后图片裁剪使用

React-avatar-editor

,样式我是参照知乎的调整的。

地址：https://github.com/mosch/react-avatar-editor

直接上代码：

<AvatarEditor
ref={this.setEditorRef}
image={this.state.originImg}
width={200}
height={200}
border={50}
color={[248, 249, 250, 0.8]}
borderRadius={200}
scale={parseFloat(this.state.scale)}
style={{ cursor: 'move', margin: '10px 0' }}
/>
<Slider
onChange={this.handleScale}
min={1}
max={2}
step={0.01}
value={this.state.scale}
style={{ width: 280, margin: '10px auto' }}
/>

通过upload获取的base64编码的图片，可以直接传给AvatarEditor的image属性。然后AvatarEditor提供了多种调整图片的接口，具体看github文档吧，都有例子。调整后使用editor参数拿到调整后的base64编码上传。

我只使用ant-design的Slider实现了个调整
9a46
大小的功能。至于外部框体可以使用ant-design的Modal实现。



最后补充一下，如何限制只能选到图片格式的文件。可以设置upload的accept属性为

image/*

。其他格式看这里：

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept