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

Ant Design Pro上传图片

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

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

首先说下原理：

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

下边上代码：importReact,{PureComponent,Fragment}from'react';

import{connect}from'dva';

import{

Button,

Icon,

message,

Upload,

}from'antd';

classFilesUploadextendsPureComponent{

render(){

//文件列表

constfileList=[];

constprops2={

//上传接口api

action:'/server/api/uploadFiles',

listType:'picture',

defaultFileList:[...fileList],

className:'upload-list-inline',

};

return(

Upload

)

}

}

exportdefaultFilesUpload

这是上传页面的文件

效果图如下：

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