3.Ant Design Pro V2 文件上传

准备

控件的资料可以查看ant desgin的文档：https://ant.design/components/upload-cn/

选一个自己喜欢的上传控件类型，然后开始吧

开始

我选的是拖拽式的上传文件方式

可以点底部的按钮来查看代码

额，代码有点长看起来不方便，但是人家很人性化的提供了几种查看方式

我喜欢CodeSandbox，因为它会把头部的引用部分也显示出来，方便我们这种复制粘贴党

主要就是引用一个ant中的upload组件

import { Upload, Icon, message } from 'antd';

然后定义一些属性

const props = {
  name: 'file',
  multiple: true,
  action: '//jsonplaceholder.typicode.com/posts/',
  onChange(info) {
    const status = info.file.status;
    if (status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (status === 'done') {
      message.success(`${info.file.name} file uploaded successfully.`);
    } else if (status === 'error') {
      message.error(`${info.file.name} file upload failed.`);
    }
  },
};

这些属性干啥用的我都是猜的，你们别当真

name：我觉得应该就是一个名字，爱咋取咋取

multiple：应该是个控制多文件上传还是单文件上传的开关

action：看着应该是上传数据的地址

onChange：看着是个处理文件上传时个个状态的事件

ReactDOM.render(
  
    

      
    
    
Click or drag file to this area to upload
    
Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files
  ,
  document.getElementById('container'));

然后下面是reactdom渲染的语句，这个是react的语法规范，就这么写

里面的Dargger是前面上传组件定义的对象，应该是的

const Dragger = Upload.Dragger;

然后至于为啥props前面那么多个点点点，我现在也不知道，等我学会了再解释

然后就是复制粘贴大法，把需要的引用定义的东西都拷贝到ant desing pro的工程里来

唯一的区别就是不再是用ReactDOM.render了

而是拷贝到自己定义的类里面的render()方法里

再然后就是跑起来~

我顺便改了下描述文字再加了个提交按钮

     
          

            
              
                
                  
                    

                      
                    
                    
点击或者拖拽文件到此处上传文件
                    
请上传符合政策模版配置的文件,请确认上传文件的格式,仅支持xlsx文件
                                   
                 
                                       
              
            

    
            
              
                
                  Submit
                   
                 
                       
          
        

接着就是准备后台了，因为我平时是写.Net的，所以我用VS创建了一个WebAPI工程

然后创建了一个APIController

[HttpPost]
        public string Upload() {

            string result = "";
            HttpFileCollection filelist = HttpContext.Current.Request.Files;
            if (filelist != null && filelist.Count > 0)
            {

              for (int i = 0; i < filelist.Count; i++)
              {
                HttpPostedFile file = filelist[i];
                String Tpath = "/" + DateTime.Now.ToString("yyyy-MM-dd") + "/";
                string filename = file.FileName;
                string FileName = DateTime.Now.ToString("yyyyMMddHHmmssfff")+'_'+ file.FileName;
                string FilePath = System.Threading.Thread.GetDomain().BaseDirectory + "\\" + Tpath + "\\";
          //Url.Content("~/Content/images/logo.png")
                DirectoryInfo di = new DirectoryInfo(FilePath);
                if (!di.Exists) { di.Create(); }
                try
                {
                  file.SaveAs(FilePath + FileName);
                  result = (Tpath + FileName).Replace("\\", "/");
                }
                catch (Exception ex)
                {
                  result = "上传文件写入失败：" + ex.Message;
                }
              }
            }
            else
            {
              result = "上传的文件信息不存在！";
            }

            return result;

        }

协商上传的方法，这代码是我抄来的，稍微改了下

然后布到本地的IIS上，端口9000，跑起来先，为了测试我先允许这个方法可以HttpGet

这个WebAPI运行正常，然后我把API的Url填到控件的Action中

这个时候遇到了错误，request报405错误

我猜是不是因为我web和api的站点域名不一样导致的？

那我先把action的地址改成和我web的端口一样都是8001

action: 'http://localhost:8001/api/FileUpload/Upload/',

再打开我的fiddler，把请求到8001/api的请求都改到9000端口上

再上传一次文件

这次弹出了上传成功的提示

然后再WebAPI的工程目录下自动生成了文件夹

并且上传的文件也进来了

那这种跨域的问题怎么在Ant Deign Pro里处理呢？

我也不知道，谁知道给我留言，不然又要加班头疼了

---

2018.09.19

跨域问题解决了，参考这篇文章  ：WebAPI跨域

然后遇到了新问题，npm run build 出来的action的url和我实际配置的不一样，谁知道啥情况