Laravel-admin 插件中文件上传改为异步上传并设置_token 和_method

Laravel laravel-admin 是一个很不错的后台管理系统,在此基础上,用好了可以大大减少开发成本,真正做到敏捷开发,但官方文档难免还有一些不足,例如插件中文件上传改为异步上传并设置_token和_method的方法并没有介绍.

官方文档只有一些基础的使用方法:

// 文件上传
$form->file($column[, $label]);

// 修改文件上传路径和文件名
$form->file($column[, $label])->move($dir, $name);

// 并设置上传文件类型
$form->file($column[, $label])->rules('mimes:doc,docx,xlsx');

// 添加文件删除按钮
$form->file($column[, $label])->removable();

// 多图/文件上传
$form->multipleImage($column[, $label]);

// 添加删除按钮
$form->multipleImage($column[, $label])->removable();

// 多文件
$form->multipleFile($column[, $label]);

// 添加删除按钮
$form->multipleFile($column[, $label])->removable();

其实阅读插件原代码可以发现有一些函数虽然没写在官方文档中,但功能还是在的,如options方法,可以直接添加fileinput配置,那这样就可以直接设置为异步上传,并且设置_token和_method值了,如下代码,还有addElementClass方法,可以加指定样式

return Admin::form(Android::class, function (Form $form) {

    // 异步上传文件,限上传apk格式
    $form->file('file_upload', '上传安装包')->removable()->addElementClass('apk_upload')->options([
        'showPreview' => false,
        'allowedFileExtensions'=>['apk'],
        'showUpload'=>true,
        'uploadAsync' =>true,
        'uploadUrl' => '/admin/common/apk_upload',
        'uploadExtraData' => [
            '_token'    => csrf_token(),
            '_method'   => 'POST',
        ],
    ])->setWidth(5, 3);
});
本作品采用《CC 协议》,转载必须注明作者和本文链接
不要轻易放弃。学习成长的路上,我们长路漫漫,只因学无止境 Don't give up easily. On the way of learning and growing up, we have a long way to go, just because there is no end to learning.
本帖由系统于 5年前 自动加精
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
讨论数量: 9

如果这么处理了,怎么把返回的文件路径赋值

5年前 评论

后续该怎么赋值呢?

4年前 评论

请问一下上传成功以后怎么获取上传成功的值? 并且写进去~

3年前 评论

$js = <<<EOT $('input.apk_upload').on('fileuploaded', function(event, data, id, index) { var res = data.response; alert(res.msg) }); EOT; Admin::script($js); 后续可以这样获取返回值,希望能帮到你

3年前 评论

遇到了相同的问题,file上传成功之后怎么把文件路径赋值给file呢?我用js赋值之后提交表单没有file对应的这个字段是怎么回事呢?是我的方法不对吗?代码如下 $('input.video_upload').on ('fileuploaded', function (event, data, id, index) { var res = data.response; console.log(event); var file_id= event.target.id; if(res.code==200){

   $('#'+file_id).attr('value',res.data.url);
}else{
    alert(res.msg);
}

});

3年前 评论
stefen 2年前

file 使用这个方法可以上传到库里,但是页面图片回显展示失败了,请问有什么方法吗?

2年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!