react结合ant design的管理系统

---

前言

最早接触react是cv大法遇到的一些问题，当时没有发出来，现在看到了虽然有很多幼稚的问题，还是觉得记录一下也蛮好的。。🙊╮(╯_╰)╭

二、使用步骤

1.实时改变图片的宽高

需要将用户传入的svg图展示的下方div并且可以实时的供用户改变大小，与文字的位置等利用canvas将获取的svg的url与用户输入的值绑定进行绘图：

svgToCavas(url, id) {
   
    const canvas = document.getElementById(id);
    const {
    svgWidth, svgHeight } = this.state;
    if (canvas) {
   
      const ctx = canvas.getContext("2d");
      const img = new Image();
      img.src = url;
      img.onload = () => {
   
        ctx.drawImage(img, 0, 0, svgWidth, svgHeight);
      };
    }
  }

2.表单上传图片

代码如下（示例）：表单上传图片与回显

 <Form.Item label="上传图片" extra="图片格式为svg，且不能大于5M">
getFieldDecorator("url", {
   
                  valuePropName: "fileList",
                  rules: [{
    required: true, message: "请上传图片" }],
                  getValueFromEvent: this.normFile,// 上传图片前的钩子函数
                })(
		<Upload
		    name="file" // 向接口传的的file,上传图片回得到两个参数(file当前传的图片,fileList所有传递图片的list)
		    accept=".jpg,.svg,.png" // 将不符合的格式置灰
		    action="***********"
		    method="POST"
		    listType="picture" // picture,text,picture-card
		    beforeUpload={
   this.beforeUpload} //可以对图片大小或者图片格式进行限制
		   	onChange={
   this.onChange}// 改变时的函数，四种状态：removed,done，uploading,error
		    >
		    <Button>
		      <Icon type="upload" /> 点击上传
		    </Button>
		  </Upload>
   )}
</Form.Item>

/beforeUpload/
上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，res