前台图片上传

我是使用react hook搭建的项目，服务端是eggjs。

其中后台的接口使用的是https://developer.qiniu.com/kodo/sdk/1289/nodejs 官方api. https://github.com/Tonyhew/react_blog/blob/master/service/app/service/utils.js 这个是我在项目中使用的七牛云对象存储的接口，欢迎大家前去访问下载。

下面是我前端上传图片的代码

import React, { useState, useEffect, useRef } from 'react';
import Editor from 'for-editor-herb';
import marked from 'marked';
import { Row, Col, Input, Select, Button, DatePicker, message } from 'antd';
import axios from 'axios';
import servicePath from '../config/apiUrl';

const Hljs = require('highlight.js')

function AddArticle(props) {
  const addImg = (file) => {
    var formD = new FormData();
    formD.append('file', file)
    axios({
      method: 'post',
      url: servicePath.uploadFiles,
      withCredentials: true,
      data: formD,
      headers: {
        'Content-Type': 'multipart/form-data',
        'Access-Control-Allow-Origin': '*'
      }
  }).then(
    res => {
      $vm.current.$img2Url(file.name, res.data.url)
    }
   )
  }
  return (
    <div style={{ padding: 24, background: '#fff' }}>
      <Row gutter={10}>
        <Col span={24}>                
          <Editor
            ref={$vm}
            language={customLang}
            value={articleContent}
            onChange={value => changeContent(value)}
            addImg={($file) => addImg($file)}
            preview
            subfield
            highlight={Hljs.highlightAuto}
          />
        </Col>
      </Row>
    </div>
  ）
}