前端代码

  1. //引入antd组件
  2. import { Upload, message } from 'antd';
  3. import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
  5. class Avatar extends React.Component {
  6.   state = {
  7.     loading: false,
  8.   };
  10.     //判断要上传的图片格式和大小，返回true继续上传，返回false终止上传
  11.     beforeUpload(file) {
  12.       const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  13.       if (!isJpgOrPng) {
  14.         message.error('You can only upload JPG/PNG file!');
  15.       }
  16.       const isLt2M = file.size / 1024 / 1024 < 2;
  17.       if (!isLt2M) {
  18.         message.error('Image must smaller than 2MB!');
  19.       }
  20.       return isJpgOrPng && isLt2M;
  21.     }
  23.     customRequest() {
  25.   }
  27.   render() {
  28.     const { loading, imageUrl } = this.state;
  29.     // loading，图片上传过程中显示的loading
  30.     const uploadButton = (
  31.       <div>
  32.         {loading ? <LoadingOutlined /> : <PlusOutlined />}
  33.         <div style={{ marginTop: 8 }}>Upload</div>
  34.       </div>
  35.     );
  36.     return (
  37.       //重要代码，调用antd的上传组件
  38.       <Upload
  39.         name="avatar"
  40.         listType="picture-card"
  41.         className="avatar-uploader"
  42.         showUploadList={false}
  43.         action="请求路径"
  44.         beforeUpload={(file)=>{this.beforeUpload(file)}}  //在上传之前做一些判断
  45.         customRequest={()=>{this.customRequest()}}        //自定义上传事件处理函数
  46.       >
  47.         {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
  48.       </Upload>
  49.     );
  50.   }
  51. }

后端代码

  1. //使用nodejs加egg
  3. // router.js
  4.   router.post('/user/upload', controller.user.upload);
  6. // controller
  7.     async upload() {
  8.     const { ctx } = this;
  9.     const file = ctx.request.files[0];   //获取前端传入的文件信息
  10.     const uploadError = await ctx.service.user.upload(file)
  11.     if (uploadError) {
  12.       ctx.status = 403;
  13.       ctx.body = {
  14.         code: 0,
  15.         msg: '上传失败！',
  16.         result: uploadError,
  17.       };
  18.     } else {
  19.       ctx.status = 200;
  20.       ctx.body = {
  21.         code: 0,
  22.         msg: '上传成功！',
  23.         imgUrl: `http://localhost:70001/images/upload/${file.name}`,  //返回图片路径
  24.       }
  25.     }
  26.   }
  28. // service
  29.  async upload(file) {
  30.     //使用fs模块进行读文件和写文件，
  31.     const uploadData = fs.readFileSync(file.path);
  32.     // 把上传的图片放在egg的public静态资源目录下。
  33.     const uploadDir = path.join(process.cwd(), '/app/public/upload', file.name);
  34.     const uploadError = fs.writeFileSync(uploadDir, uploadData);
  35.     return uploadError;
  36.   }