ADD：bug截图上传upload自定义方式上传

src/pages/edit/components/Step2/index.jsx

@@ -12,9 +12,10 @@ import {
 } from '@ant-design/icons';
 import * as echarts from 'echarts';
 import { recurrent, severity, bug_categories } from './const';
-import { timeToString } from '../../utils';
+import { timeToString,getBase64 } from '../../utils';
 
 import BugGuideTree from '../BugGuideTree';
+import { instanceOf } from 'prop-types';
 
 const formItemLayout = {
   labelCol: {
@@ -33,6 +34,12 @@ const modalFormItemLayout = {
   },
 };
 
+const uploadButton = (
+  <div>
+    <PlusOutlined />
+    <div style={{ marginTop: 8 }}>点击上传</div>
+  </div>
+);
 
 const Step2 = (props) => {
   const [reportForm] = Form.useForm();
@@ -44,7 +51,6 @@ const Step2 = (props) => {
     dispatch, reportCommonInfo, osType,
     testCaseList, caseBugList, categories, pathInfo,
   } = props;
-
   const [showTaskRecommendModal, setTaskRecommendModal] = useState(false);
   const [showAddTestCaseModal, setAddTestCaseModal] = useState(false);
   const [showAddBugModal, setAddTestBugModal] = useState(false);
@@ -52,6 +58,13 @@ const Step2 = (props) => {
   const currentTestCaseRef = useRef({});
   const [isAddCaseStatus, setIsAddCaseStatus] = useState(true);
   // const [currActiveTestCase, setCurrActiveTestCase] = useState({});
+
+  //上传图片廊需要的字段
+  const [fileList,setFileList] = useState([]);
+  const [previewTitle,setPreviewTitle] = useState('');
+  const [previewImage,setPreviewImage] = useState('');
+  const [previewVisible,setPreviewVisible] = useState(false);
+
   const [page2List, setPage2List] = useState([]);
   const [page3List, setPage3List] = useState([]);
 
@@ -205,6 +218,41 @@ const Step2 = (props) => {
     setPage3List(item.children);
   };
 
+  const handlePreview = async file => {
+    if (!file.url && !file.preview) {
+      file.preview = await getBase64(file.originFileObj);
+    }
+    setPreviewImage(file.url || file.preview);
+    setPreviewVisible(true);
+    setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1))
+  };
+
+  const handleCancel = () => setPreviewVisible(false);
+
+  const handleUpload = ({ file }) => {
+      console.log(file)
+      let formData = new FormData();
+      formData.append('file',file);
+      formData.append('caseId',currentTestCaseRef.current.id);
+      formData.append('work_id','2');
+
+      dispatch({
+        type: 'editReport/uploadImg',
+        payload: {
+          formData
+        }
+      }).then((res)=>{
+        const newFile = {
+          uid: fileList.length,
+          name:file.name,
+          status: 'done',
+          url: res
+        }
+        setFileList([...fileList,newFile])
+      })
+    }
+
+
   useEffect(() => {
     //判断是否已经有报告
     dispatch({
@@ -623,17 +671,28 @@ const Step2 = (props) => {
               })}
             </Select>
           </Form.Item>
-          {/*<Form.Item*/}
-          {/*  label="上传截图"*/}
-          {/*  name="testName"*/}
-          {/*>*/}
-          {/*  <Upload*/}
-          {/*    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"*/}
-          {/*    listType="picture"*/}
-          {/*  >*/}
-          {/*    <Button icon={<UploadOutlined />}>Upload</Button>*/}
-          {/*  </Upload>*/}
-          {/*</Form.Item>*/}
+          <Form.Item
+            label="上传截图"
+            name="testName"
+          >
+            <Upload
+              listType="picture-card"
+              fileList={fileList}
+              onPreview={handlePreview}
+              customRequest={handleUpload}
+              // beforeUpload = {beforeUpload}
+            >
+              {uploadButton}
+            </Upload>
+            <Modal
+              visible={previewVisible}
+              title={previewTitle}
+              footer={null}
+              onCancel={()=>handleCancel()}
+            >
+              <img alt="example" style={{ width: '100%' }} src={previewImage} />
+            </Modal>
+          </Form.Item>
         </Form>
       </Modal>
       <Modal title="修改报告基础信息" visible={showEditReportModal}

src/pages/edit/model.js

@@ -18,6 +18,7 @@ import {
   cancelGoodReport,
   cancelBadReport,
   recordAction,
+  uploadImage
 } from './service';
 
 const Model = {
@@ -246,6 +247,13 @@ const Model = {
       yield call(recordAction, user_id, target_id, action);
     },
 
+    //todo:上传照片
+    * uploadImg({ payload }, { call, put }) {
+      const { formData } = payload;
+      let res = yield call(uploadImage, formData);
+      return res;
+    },
+
   },
   reducers: {
     saveCurrentStep(state, { payload }) {

src/pages/edit/service.js

@@ -176,4 +176,12 @@ export async function recordAction(user_id,report_id,action) {
   });
 }
 
+//todo:上传图片
+export async function uploadImage(data) {
+  return request('/api/upload/image', {
+    method: 'post',
+    data,
+  });
+}
+
 

src/pages/edit/utils.js

@@ -10,3 +10,11 @@ export const timeToString = (time)=>{
   return Y+M+D+h+m+s;
 }
 
+export const getBase64 = (file)=> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = error => reject(error);
+  });
+}