Ant Design Pro上传图片

Ant Design Pro上传图片

今天看了下Ant Design Pro上传图片的插件,感觉挺简单,也没有遇到太多问题,分享个大家!顺便记录下。

这里有个坑,主要文件命名的时候不要和保留关键词同名! 比如 Upload.js 就和 Upload插件冲突~~~

微信截图_20181107133352.png

首先说下原理:

这个插件和平常的ajax提交FormData表单是样的!接收也一样!

下边上代码:

import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import {
    Button,
    Icon,
    message,
    Upload,
} from 'antd';
class FilesUpload extends PureComponent {
    render() {
        //文件列表
        const fileList = [];
        const props2 = {
            //上传接口api
            action: '/server/api/uploadFiles',
            listType: 'picture',
            defaultFileList: [...fileList],
            className: 'upload-list-inline',
        };
        return (<div>
                <Upload {...props2}>
                  <Button>
                    <Icon type="upload" /> Upload
                  </Button>
                </Upload>
            </div>)
    }
}
export default FilesUpload

这是上传页面的文件

效果图如下:

微信截图_20181107131859.png

我的后台用的PHP laravel,接口路径是 /api/uploadFiles;

简单的上传数据保存代码:

Route::post('/uploadFiles',function(Request $request){
    $file = $request->file('file');
    $ext = $file->getClientOriginalExtension();
    $path = $file->getRealPath();
    $filename = date('Y-m-d-h-i-s').'.'.$ext;
    $flg = Storage::disk('public')->put($filename, file_get_contents($path));
    var_dump($flg);
    var_dump($filename);
    var_dump($path);
});

ok~  Ant Design Pro上传图片就搞定了!试试白~~ 

Ant Design Pro上传图片


喜欢(0)

评论 抢沙发

表情