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.
本帖由系统于 6年前 自动加精
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
讨论数量: 9

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

6年前 评论

后续该怎么赋值呢?

5年前 评论

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

4年前 评论

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

4年前 评论

遇到了相同的问题,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);
}

});

4年前 评论
stefen 3年前

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

3年前 评论