当前位置: 首页 > Web前端 > vue.js

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

时间:2023-03-31 23:02:33 vue.js

昨天遇到一个后端传输问题,导致nginx502。今天调整代码后贴出解决方案。前端直传的好处:减轻应用服务器的压力这一点在上传大文件时尤为明显。PHP会消耗很大一部分内存来处理前端分片上传的文件,然后传给oss。如果文件特别大,nginx时间长了会直接502。我们不需要调整nginx的超时时间来缩小道路。直接从客户端直接传输oss。渲染完成是因为dcat-admin高度封装了。改变它的组件基本不现实,但是$form->view()方法可以引入一个视图文件。我的想法是用vue封装一个上传的组件,然后通过这个方法导入。正好laravel提供了一个集成vue的前端脚手架laravelmix。laravelversion7.x####startashuttercomposerrequirelaravel/ui--dev//安装前端脚手架phpartisanuivue//发布vue文件npminstallnpminstallali-oss--save//installossjs-sdknpminstallclipboard--save//安装拷贝插件npmrunwatch//命令监控热加载,使用element-ui编译组件,所以我们在全局引入npmielement-ui-Sloadsapp.js文件importElementUIfrom'element-ui';import'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);importClipboardfrom'clipboard';Vue.prototype.Clipboard=剪贴板;并创建一个新组件OssFile在app.js中引入组件Vue.component('oss-file',require('./components/uploads/OssFile.vue').default);在视图目录中创建一个新的oss.blade。php导入组件

最后,$form->html(view('uploads.oss'));$form->text('链接','直接传输后填写地址');完美解决~~~oss跨域问题遇到的问题RequestId错误处理方法oss中出现添加`ETagx-oss-request-id`参考文章oss文档*阿里oss出现RequestId错误处理方法