Fetch 头像剪切修改

前言:通过Input file upload 图片到canvas 中进行剪裁,react 可以引入react-avatar-editor对图片进行剪裁

react-avatar-editor的使用

 <AvatarEditor
          ref={(editor) => { this.editor = editor; }}
          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' }}
        />
<Input type="file" prefix={<Icon type="upload" />} ref={(input) => { this.file = input; }} onChange={this.onAvatarUpload} />

读取文件input上传的图片文件

onAvatarUpload=() => {
    const reader = new FileReader();
    reader.onload = (e) => {
      const imgFile = e.target.result;
      this.setState({
        originImg: imgFile,
      });
    };
    reader.readAsDataURL(this.file.input.files[0]);
  }

 将剪裁好的图片文件传到后端服务器,将canvas对象以blob文件流的形式进行传递

completeEditorAvatar=() => {
    if (this.editor) {
      const canvasScaled = this.editor.getImageScaledToCanvas();
      canvasScaled.toBlob((file) => {
        this.props.completeEditorAvatar(file);
      });
    }
  }

前端和后端服务器之间的通信这里是使用fetch的方式发送

const data = new FormData();
 data.append('avatar', new File([params.avatar], 'avatar.png', { type: 'image/png' }));

在上面这过程中,通过canvas转成blob文件流在发送到后端会出现这个文件的后缀名为空,需要对blog进行进一步以new File([params.avatar], 'avatar.png', { type: 'image/png' })的方式进行封装

    我们在通过fetch的方式方送PATCH请求到后端服务器时,非文件上传时，无关你发送的数据格式是application/x-www-form-urlencoded或者application/json格式数据，你不设置请求头，fetch会给你默认加上一个Content-type = text/xml类型的请求头,文件上传时浏览器会自动转成application/json 格式,而且文件上传也是需要我们知道boundary的定义方式,那么我们就不用手动去设置Content-type

return fetch(url, newOptions)
    .then(checkStatus)
    .then((response) => { return response.json(); })