登录  /  注册
博主信息
博文 98
粉丝 1
评论 0
访问量 78020
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
tp、vue前后端分离文件上传
阿杰
原创
566人浏览过

后端代码(tp6)

先设置文件存储位置

  1. // 文件上传
  2. public function uploads(){
  3. // 接受文件上传
  4. $file = Request()->file('file');
  5. // dump($file);
  6. // 设置文件上传的大小
  7. $FileMaxSize = 1024*1024*2;
  8. // 设置规则
  9. $validate = Validate::rule([
  10. 'file'=>'fileSize:'.$FileMaxSize.'|file|fileExt:jpg,png,gif,docx'
  11. ]);
  12. // 检测文件是否符合所设规则
  13. $result = $validate->check([
  14. 'file'=>$file
  15. ]);
  16. if($result){
  17. // $info = Filesystem::putfile('topic',$file); //保存路径:runtime\storage\topic\
  18. $info = Filesystem::disk('public')->putfile('bannerImg',$file); //保存路径:public\storage\topic\
  19. // dump($info);
  20. $data['img'] = $info;
  21. Db::connect('mysql2')->table('wly_banner')->insert(['imgurl'=>$info]);
  22. return Result::Success($data);
  23. }else{
  24. // dump($validate->getError());
  25. return Result::Error(0,$validate->getError());
  26. }
  27. }

前端代码 (vue3)

  1. <input type="file" @change="handleFile">
  2. <!-- 存放图片 -->
  3. <img v-if="curImgUrl!=''" :src="baseImg+curImgUrl" alt="" srcset="" style="width:200px;height:auto;">
  4. <button @click="toUpload">上传</button>
  1. const baseImg = ref('http://phpedu.com/1207/mytp/public/storage/');
  2. const curImgUrl = ref('');
  3. const fileUrl = ref('');
  4. const fileUrl2 = ref([]);
  5. const handleFile = ()=>{
  6. let filePaths = window.event.target.files[0];
  7. let obj = {file:filePaths};
  8. fileUrl.value = obj;
  9. }
  10. const toUpload = ()=>{
  11. // 创建一个表单数据
  12. var data = new FormData();
  13. data.append("file",fileUrl.value.file);
  14. uploads(data).then((res)=>{
  15. console.log(res);
  16. alert(res.message);
  17. if(res.code==1){
  18. curImgUrl.value = res.data.img;
  19. }
  20. })
  21. }

成功后在所设置文件夹可看见上传文件

本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学