前端：文件上传。后续继续完善。

admin-web/package.json

@@ -52,6 +52,7 @@
     "omit.js": "^1.0.0",
     "path-to-regexp": "^3.0.0",
     "prop-types": "^15.6.2",
+    "qiniu-js": "^2.5.4",
     "qs": "^6.6.0",
     "rc-animate": "^2.6.0",
     "react": "^16.7.0",

admin-web/src/pages/Product/ProductSpuAddOrUpdate.js

@@ -3,17 +3,134 @@
 import React, {PureComponent, Fragment, Component} from 'react';
 import { connect } from 'dva';
 import moment from 'moment';
-import {Card, Form, Input, Radio, Button, Table, Select} from 'antd';
+import {Card, Form, Input, Radio, Button, Modal, Select, Upload, Icon} from 'antd';
 import PageHeaderWrapper from '@/components/PageHeaderWrapper';
 
+import * as qiniu from 'qiniu-js'
+
 import styles from './ProductSpuAddOrUpdate.less';
 import ProductAttrSelectFormItem from "../../components/Product/ProductAttrSelectFormItem";
 import ProductSkuAddOrUpdateTable from "../../components/Product/ProductSkuAddOrUpdateTable";
+import {fileGetQiniuToken, fileUploadQiniu} from "../../services/admin";
 
 const FormItem = Form.Item;
 const RadioGroup = Radio.Group;
 const Option = Select.Option;
 
+class PicturesWall extends React.Component {
+  state = {
+    token: undefined, // 七牛 token
+
+
+    previewVisible: false,
+    previewImage: '',
+
+    fileList: [{ // 目前图片
+      uid: -1,
+      name: 'xxx.png',
+      status: 'done',
+      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+    }],
+  };
+
+  handleCancel = () => this.setState({ previewVisible: false })
+
+  handlePreview = (file) => {
+    this.setState({
+      previewImage: file.url || file.thumbUrl,
+      previewVisible: true,
+    });
+  }
+
+  beforeUpload = async () => {
+    const tokenResult = await fileGetQiniuToken();
+    if (tokenResult.code !== 0) {
+      alert('获得七牛上传 Token 失败');
+      return false;
+    }
+    this.setState({
+      token: tokenResult.data,
+    });
+    return true;
+  };
+
+  customRequest = ({action,
+                     file,
+                     headers,
+                     onError,
+                     onProgress,
+                     onSuccess,
+                     withCredentials,}) => {
+    // 使用 FileReader 将上传的文件转换成二进制流，满足 'application/octet-stream' 格式的要求
+    const reader = new FileReader();
+    reader.readAsArrayBuffer(file);
+    let fileData = null;
+    reader.onload = (e) => {
+      // 在文件读取结束后执行的操作
+      fileData = e.target.result;
+      // 上传文件
+      // fileUploadQiniu(fileData);
+      // debugger;
+      // 使用 axios 进行文件上传的请求
+      // axios.put(action, fileData, {
+      //   withCredentials,
+      //   headers,
+      //   onUploadProgress: ({ total, loaded }) => {
+      //     // 进行上传进度输出，更加直观
+      //     onProgress({ percent: Math.round(loaded / total * 100).toFixed(2) }, file);
+      //   },
+      // }).then(response => {
+      //   onSuccess(response, file);
+      // })
+      //   .catch(onError);
+      let observable = qiniu.upload(file, '123', this.state.token);
+      observable.subscribe(function () {
+        // next
+      }, function () {
+        // error
+      }, function () {
+        // complete
+      });
+    };
+    return {
+      abort() {
+        console.log('upload progress is aborted.');
+      },
+    };
+  };
+
+  handleChange = ({ fileList }) => this.setState({ fileList })
+
+  render() {
+    const { previewVisible, previewImage, fileList } = this.state;
+    const uploadButton = (
+      <div>
+        <Icon type="plus" />
+        <div className="ant-upload-text">Upload</div>
+      </div>
+    );
+    return (
+      <div className="clearfix">
+        <Upload
+          // action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+          action="https://up-z2.qiniu.com"
+          listType="picture-card"
+          fileList={fileList}
+          onPreview={this.handlePreview}
+          onChange={this.handleChange}
+          beforeUpload={this.beforeUpload}
+          customRequest={this.customRequest}
+        >
+          {fileList.length >= 3 ? null : uploadButton}
+        </Upload>
+        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
+          <img alt="example" style={{ width: '100%' }} src={previewImage} />
+        </Modal>
+      </div>
+    );
+  }
+};
+
 // roleList
 @connect(({ productSpuList, productAttrList, productSpuAddOrUpdate, loading }) => ({
   // list: productSpuList.list.spus,
@@ -246,9 +363,10 @@ class ProductSpuAddOrUpdate extends Component {
               })(<Input placeholder="请输入" />)}
             </FormItem>
             <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="商品主图">
-              {form.getFieldDecorator('picUrls', {
+              {/*{form.getFieldDecorator('picUrls', {*/}
-                initialValue: '', // TODO 修改 // TODO 芋艿，做成上传组件
+              {/*  initialValue: '', // TODO 修改 // TODO 芋艿，做成上传组件*/}
-              })(<Input placeholder="请输入" />)}
+              {/*})(<Input placeholder="请输入" />)}*/}
+              <PicturesWall />
             </FormItem>
             <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="是否上架">
               {form.getFieldDecorator('visible', {

admin-web/src/pages/Product/ProductSpuAddOrUpdate.less

@@ -13,3 +13,13 @@
 .tableDelete {
   color: red;
 }
+
+.ant-upload-select-picture-card i {
+  font-size: 32px;
+  color: #999;
+}
+
+.ant-upload-select-picture-card .ant-upload-text {
+  margin-top: 8px;
+  color: #666;
+}

admin-web/src/services/admin.js

@@ -156,3 +156,17 @@ export async function dictionaryDelete(params) {
     method: 'POST',
   });
 }
+
+// file
+
+export async function fileGetQiniuToken() {
+  return request(`/admin-api/admins/file/get_qiniu_token`, {
+    method: 'GET',
+  });
+}
+
+// export async function fileUploadQiniu(fileData) {
+//   return request(`/qiniu/upload`, {
+//     method: 'POST',
+//   });
+// }

admin/admin-application/src/main/java/cn/iocoder/mall/admin/application/config/MVCConfiguration.java

@@ -38,7 +38,8 @@ public class MVCConfiguration implements WebMvcConfigurer {
     public void addInterceptors(InterceptorRegistry registry) {
 //        registry.addInterceptor(securityInterceptor).addPathPatterns("/user/**", "/admin/**"); // 只拦截我们定义的接口
         registry.addInterceptor(adminAccessLogInterceptor).addPathPatterns("/admins/**");
-        registry.addInterceptor(adminSecurityInterceptor.setIgnoreUrls(ignoreUrls)).addPathPatterns("/admins/**");
+        registry.addInterceptor(adminSecurityInterceptor.setIgnoreUrls(ignoreUrls)).addPathPatterns("/admins/**")
+                .excludePathPatterns("/admins/passport/login"); // 排除登陆接口
     }
 
     @Override