前后端分离 - 文件上传

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
后端接口使用tp6
  • config文件夹下，配置filesystem.php

  • 单文件上传

  • 多文件上传

前端使用vue3

  • 通过input标签来上传文件

  • 单文件上传

  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 handleFile = ()=>{
  2.             // console.log(window.event.target.files);
  3.             let filePaths = window.event.target.files[0];
  4.             let obj = {file:filePaths};
  5.             fileUrl.value = obj;
  6.         }
  8.         const toUpload = ()=>{
  9.             // 创建一个表单数据
  10.             var data = new FormData();
  11.             data.append("file",fileUrl.value.file);
  12.             uploads(data).then((res)=>{
  13.                 console.log(res);
  14.                 alert(res.message);
  15.                 if(res.code==1){
  16.                     curImgUrl.value = res.data.img;
  17.                 }
  18.             })
  19.         }

  • 多文件上传
  1.         <!-- 多文件上传 -->
  2.         <input type="file" id="back" ref="backfile" multiple  @change="handleFile2" />
  3.         <div class="btCont">
  4.             <button class="myBt" @click="toUpload2">上传</button>    
  5.         </div>
  1.         const handleFile2 = ()=>{
  2.             let filePaths = window.event.target.files;
  3.             //清空原有缩略图
  4.             if (filePaths.length === 0) {
  5.                 //未选择，则返回
  6.                 return
  7.             } else {
  8.                 //清空数组中原有图片
  9.                 selFiles.value.length = 0;
  10.             }
  11.             //把新选中的图片加入数组
  12.             for( var i=0;i<filePaths.length; i++ ){
  13.                 let file = filePaths[i];
  14.                 let one = {
  15.                     file:file,
  16.                 }
  17.                 selFiles.value.push(one);
  18.             }
  19.         }
  21.         const toUpload2 = ()=>{
  22.             // 创建一个表单数据
  23.             var data = new FormData();
  24.             //遍历文件，添加到form
  25.             for( var i=0;i<selFiles.value.length; i++ ){
  26.                 let fileOne = selFiles.value[i].file;
  27.                 data.append("file[]",fileOne);
  28.             }
  29.             uploadss(data).then((res)=>{
  30.                 console.log(res);
  31.                 alert(res.message);
  32.             })
  33.         }

存储地址
  • 根据filesystem.php文件设置的地址存放上传的文件

【文章原创作者：大丰网页设计 http://www.1234xp.com/dafeng.html 复制请保留原URL】
更多阅读