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实现了个调整大小的功能。至于外部框体可以使用ant-design的Modal实现。

  

  最后补充一下，如何限制只能选到图片格式的文件。可以设置upload的accept属性为image/*。其他格式看这里：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept