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上传图片