从零开始，搭建一个简单的购物平台（六）

从零开始，搭建一个简单的购物平台（五）：https://blog.csdn.net/time_____/article/details/105437534
项目源码（持续更新）：https://gitee.com/DieHunter/myCode/tree/master/shopping

在第四篇文章中实现了服务端的文件上传以及添加用户的后端功能，并进行了测试，这篇文章主要实现前端上传头像和添加用户的功能

首先我们引入antd中的文件上传组件，并将其封装到我们的组件中

• 我们限制用户只能上传一张图片，其中上传组件中的action表示上传的路径，也就是我们在第四篇中的测试上传文件地址，name是文件标识名，data是传的参数，这里我们是用的token

import React from "react";
import { Upload,  message } from "antd";
import { PlusOutlined } from "@ant-design/icons";
import config from "../../config/config";
let {
  UploadName,
  Agreement,
  BaseUrl,
  ServerPort,
  Path,
  UploadKey,
  StorageName,
} = config;
export default class UpdataPic extends React.Component {
  state = {
    fileList: [],
  };
  
  
  handleChange = ({ fileList, file }) => {
    this.setState({ fileList });
    if (file["response"] && file.status == "done") {
      let res = file["response"];
      message.success(res.msg);
    }
    if (file["status"] == "removed") {
      
    }
  };
  render() {
    const { fileList } = this.state;
    const uploadButton = (
      

        
        
上传头像
      
    );
    return (
      

        
          {fileList.length >= 1 ? null : uploadButton}
        
      
    );
  }
}

• 然后我们在某个页面引入该组件试试效果

上传功能实现后，我们就可以开始实现添加用户了

• 新增用户，我打算放到右边的抽屉组件中，也就是Drawer组件，将form表单嵌入至抽屉中（修改用户和新增用户有着类似之处，我们做修改用户信息直接在新增用户Drawer中赋予form初始值即可）

• 有几个注意点，1.antd的form需要使用React.createRef()将组件加载。2.表单数据赋予初始值时，需要调表单的this.formRef.current.setFieldsValue（）方法，然而这里有个坑，当Drawer组件显示时，form组件还未载入，这时如果直接赋值，就会因异步导致赋值不成功，解决方法（官方给的处理方式是用redux全局管理，我这里是用生命周期函数解决的）：首先在Drawer组件中启用预加载功能（forceRender，预渲染 Drawer 内元素），然后在生命周期（componentDidUpdate）中获取state中的值，调用this.formRef.current.setFieldsValue（）即可（修改用户信息与此相同）

import React from "react";
import Mail from "../../config/mail";
import {
  Drawer,
  Form,
  Button,
  Col,
  Row,
  Input,
  Select,
  Radio,
  Cascader,
  message,
} from "antd";
import config from "../../config/config";
import City from "../../config/city";
import UpdataPic from "../updata/updata";
const { ServerApi, StorageName, FilePath } = config;
const { Option } = Select;

export default class ListDrower extends React.Component {
  formRef = React.createRef();
  state = {
    visible: false,
    record: {},
  };
  componentDidMount() {
    this.props.onDrowerRef(this);
  }
  componentDidUpdate() {
    this.formRef.current.setFieldsValue(this.state.record);
  }

  showDrawer = () => {//显示Drawer
      this.setState({
        formType: "add",
        visible: false,
        record: {
          sex: "man",
          userType: "user",
          mailurl: "@qq.com",
        },
      });
    this.setState({
      visible: true,
    });
  };
  onClose = () => {//隐藏Drawer
    this.formRef.current.resetFields();
    this.setState({
      visible: false,
      record: null,
    });
  };
  getPic = (data) => {//上传头像后刷新表单头像信息
    this.formRef.current.setFieldsValue({
      headPic: data.headPath,
    });
  };
  delPic = () => {//删除头像后同时删除表单图片信息
    this.formRef.current.setFieldsValue({
      headPic: null,
    });
  };
  sendData(val) {//提交用户信息
    val.token = this.$utils.getStorage(StorageName.token);
    let data = this.$crypto.setCrypto(val);
    let _t = this;
    this.$axios
      .post(ServerApi.user.addUser, { crypto: data })
      .then((res) => {
        switch (res.result) {
          case 1:
            message.success(res.msg);
            _t.onClose();
            _t.props.getUserList();
            break;
          case 0:
            message.warning(res.msg);
            break;
          default:
            // message.warning(res.msg);
            break;
        }
      })
      .catch((err) => {
        message.error("操作失败");
      });
  }
  render() {
    return (
      
            
              取消
            
          

} >

{ this.updateChild = child; }} picTarget={this.getPic} picDelete={this.delPic} > 管理员 用户 男 女 {(() => { return Mail.address.map((item) => { return ( {item.mail} ); }); })()} 提交

); } }

• 最后，我们请求服务端试一试

总结

React是一个基于view显示层实现的dom优化框架，其对全局状态管理插件redux是将部分共享变量全局化，就相当于在原生window作用域中定义全局变量，虽然有一定的便捷，但是能不用的地方，最好是少用