ant design 预览图片_Ant Design Pro上传图片

Ant Design Pro上传图片

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

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

首先说下原理：

这个插件和平常的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 (

 Upload

)

}

}

export default FilesUpload

这是上传页面的文件

效果图如下：

我的后台用的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上传图片