2019年9月21日 21:43:37

baseComponents/UploadFile/api.js

+import request from '@/H5Public/utils/request';
+import config from '@/config/config';
+
+
+function getFileUrl(params = {}, url) {
+  return request(config.folderServer + url, {
+    method: 'POST',
+    body: params,
+  });
+}
+
+export const uploadFile = (params ={}) => {
+  return getFileUrl(params, '/uploadFileApi/upload');
+};

baseComponents/UploadFile/index.js

+import React, {Fragment} from 'react';
+import { Button, Toast} from 'antd-mobile';
+import { uploadFile } from './api';
+
+export default class UploadButton extends React.Component {
+  constructor(props){
+    super(props);
+  }
+
+  clickUpload = (e) => {
+    if(e && e.stopPropagation){
+      e.stopPropagation();
+      e.preventDefault();
+    }
+    document.getElementById('infoUpload').click();
+    this.fileInput.click();
+  };
+
+  imgFileChange = (e) => {
+    const file = this.fileInput.files[this.fileInput.files.length - 1];
+    if(!file){
+      return false;
+    }
+
+    uploadFile({file}).then((res) => {
+      if(res && res.url){
+        Toast.success('上传成功!');
+        console.log(res);
+        this.props.returnFile(
+          {
+            name: res.fileName,
+            uid: res.id,
+            status: 'done',
+            previewType: res.previewType,
+            url: res.url,
+          },
+        )
+      }
+    });
+  };
+
+  render() {
+    return (
+      <div  style={{fontSize: '18px',paddingTop: '10px',paddingBottom: '10px'}} >
+        <input type="file"
+               accept={'image/*'}
+               id={'infoUpload'}
+               style={{ display: 'none' }}
+               onChange={this.imgFileChange}
+               ref={input => {
+                 this.fileInput = input;
+               }}
+        />
+
+        <p onClick={this.clickUpload} style={{textAlign: 'center'}}>
+          上传
+        </p>
+
+      </div>
+    )
+  }
+
+}