dcat-admin 大文件上传(前端直传解决)

昨天遇到了一个后端传输导致nginx502的问题

今天在调整了代码之后，遂将解决方案贴出

前端直传的好处:减轻应用服务器的压力，将压力分给了oss 这一点特别是在上传大文件时特别明显的，php是要消耗很大一部分内存去处理前端分片上传来的文件再传输给oss，如果文件特别大，耗时长nginx会直接 502 我们没必要去调整nginx的超时时间把路走窄了。直接由客户端直传oss吧。

完成后效果图

因为dcat-admin是高度封装的。改它的组件基本不现实，不过$form->view()方法可以引入一个视图文件.我的想法是用vue封装一个上传的组件，然后通过该方法引入。正好laravel提供了前端脚手架laravel mix 整合了vue。

• laravel版本7.x

#### 开始一套梭

composer require laravel/ui --dev //安装前端脚手架
php artisan ui vue //发布vue文件
npm install
npm install ali-oss --save //安装oss js-sdk
npm install clipboard --save //安装复制插件
npm run watch  //命令监视热加载、编译

使用element-ui的组件,所以我们引入它

npm i element-ui -S

在app.js文件全局加载

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
import Clipboard from 'clipboard';
Vue.prototype.Clipboard=Clipboard;

并新建组件OssFile

app.js中引入组件

Vue.component('oss-file', require('./components/uploads/OssFile.vue').default);

view目录新建oss.blade.php 引入组件

最后

  $form->html(view('uploads.oss'));
  $form->text('link','直传后填入地址');

完美解决～～～

碰到的问题

• oss 跨域问题
• oss 出现 RequestId 错误处理方法 新增`ETag
  x-oss-request-id`

参考文章

• oss文档
  *阿里 oss 出现 RequestId 错误处理方法