vant+thinkphp实现文件上传功能

news2024/11/25 9:46:16

vant+thinkphp实现文件上传功能

      • 前端
      • thinkphp后端
      • 测试

前端

vue3 +vant
代码实现
fileList 预览文件列表,具体可以参考官方文档

let config = {
headers: {
//添加请求头
“Content-Type”: “multipart/form-data”,
},
};

需要以form-data的形式上传文件,所以在发起请求之前需要配置一个请求头

<script setup>
import {ref } from "vue";
import axios from "axios";
import { showToast } from "vant";

const fileList = ref([
  // 如果图片 URL 中不包含类型信息,可以添加 isImage 标记来声明
]);

const afterRead = (file) => {
  // 创建 FormData 对象
  const formData = new FormData();

  // 遍历所有选定的文件并附加到 FormData 对象中
  formData.append("files[]", file.file);

  // 上传文件的目标 URL
  const uploadUrl = "http://127.0.0.1:8000/upload";

  let config = {
    headers: {
      //添加请求头
      "Content-Type": "multipart/form-data",
    },
  };

  // 发送 POST 请求
  axios
    .post(uploadUrl, formData, config)
    .then((response) => {
      // 处理上传成功的情况
      showToast("上传成功");
      console.log("文件上传成功:", response.data.data);
    })
    .catch((error) => {
      // 处理上传失败的情况
      showToast("文件上传失败")
      console.log("文件上传失败,请稍后重试", error);
    });
};
</script>

<template>
  <div class="mine">
    <!-- 设置 multiple 属性允许多文件选择 -->
    <van-uploader :after-read="afterRead" multiple v-model="fileList" />
  </div>
</template>

thinkphp后端

修改config/filesystem.php

<?php

return [
    // 默认磁盘
    'default' => env('filesystem.driver', 'local'),
    // 磁盘列表
    'disks'   => [
        'local'  => [
            'type' => 'local',
            'root' => app()->getRuntimePath() . 'storage',
        ],
        'public' => [
            // 磁盘类型
            'type'       => 'local',
            // 磁盘路径
            'root'       => app()->getRootPath() . 'public/uploads',
            // 磁盘路径对应的外部URL路径
            'url'        => '/uploads',
            // 可见性
            'visibility' => 'public',
        ],
        // 更多的磁盘配置信息
    ],
];

新建一个upload类用来实现文件上传的逻辑

<?php

namespace app\controller;

use think\Facade\Request;
use app\BaseController;

class Upload extends BaseController
{
    public function index()
    {
        $files = request()->file('files');

        foreach ($files as $file) {
            $ext = $file->getOriginalExtension();
            //不同文件,储存不同的文件夹
            $folder = config('filesystem.disks.folder') . '/uploads/' . $ext; //以文件后缀名作为存文件的存放目录
            if (!file_exists($folder))
                mkdir($folder, 0700, TRUE); //如果文件夹不存在,则创建


            $savename = \think\facade\Filesystem::disk('public')
                ->putFile('', $file, 'md5'); //上传文件,得到上传之后的文件名称

            if (!$savename) {
                return json([
                    "code"=>400,
                    "msg"=>"文件上传失败",
                    "data"=>null
                ]);
            } else {
                $savename = '' . str_replace("\\", "/", $savename);
                if ($savename) {
                    return json([
                        "code" => 200,
                        "msg" => "文件上传成功",
                        "data" => Request::domain() . '/uploads/' . $savename,
                        //因为要返回给前端网址,这里要加上域名 Request::domain()
                    ]);
                } 
            }

        }
      
    }
}

上传成功返回图片的url地址,可以用来当做用户的头像,或者商品的图片等

设置路由

Route::post("/upload","upload/index");

设置跨域请求

<?php

namespace app\middleware;

class CorsMiddleware
{
    public function handle($request, \Closure $next)
    {
        // 设置允许跨域的域名,* 表示允许任何域名访问
        $origin = '*';

        // 设置允许的请求方法
        $methods = 'GET, POST, PUT, DELETE';

        // 设置允许的请求头字段
        $headers = 'Origin, X-Requested-With, Content-Type, Accept';

        // 设置响应头
        header("Access-Control-Allow-Origin: *");
        header("Access-Control-Allow-Methods: *");
        header("Access-Control-Allow-Headers: *");

        // 对预检请求进行处理
        if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
            header("Access-Control-Allow-Credentials: true");
            header('Access-Control-Max-Age: 86400'); // 预检请求的有效期,单位秒
            header("Content-Length: 0");
            header("Content-Type: text/plain");
            exit();
        }

        // 继续处理请求
        return $next($request);
    }
}

在middleware.php中挂载中间件路由

<?php
// 全局中间件定义文件
return [
    // 全局请求缓存
    // \think\middleware\CheckRequestCache::class,
    // 多语言加载
    // \think\middleware\LoadLangPack::class,
    // Session初始化
    // \think\middleware\SessionInit::class

    \app\middleware\CorsMiddleware::class
];

测试

用postman上传测试
上传成功返回上传图片的url地址
在这里插入图片描述
在vue中测试

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1202654.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

IT服务台与Microsoft集成

Microsoft Teams 旨在通过创建一个共享工作区&#xff0c;使组织中的协作更加轻松&#xff0c;用户可以在其中聊天、开会、共享文件和访问业务应用。为了实现这些数字工作空间的最大效率&#xff0c;这一点很重要&#xff0c;当出现问题时&#xff0c;IT服务台团队始终在前沿。…

RDkit | 安装报错及使用

关于RDKit的学习及介绍&#xff1a; RDKit安装 基础教程&#xff1a;[Getting Started with RDKit in Python] RDkit四&#xff1a;数据处理过程中smiles编码的清洗统一化 reticulate-R Interface to Python 在RStudio中加载 rdkit.Chem和rdkit.Chem.rdmolops 时&#xff0c;报…

c语言实现两个有序链表的合并

合并两个有序链表是c语言数据结构中比较经典的问题&#xff0c;首先两个链表都是有序的&#xff0c;即节点的顺序是按照各个节点中的值从小到大排序&#xff0c;而且合并之后的新链表中的各个节点顺序也要满足从小到大的排序&#xff0c;具体如下图所示。 思路&#xff1a;用ma…

2012年7月11日 Go生态洞察:Gccgo在GCC 4.7.1中的集成

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

Mysql学习笔记--基础

一&#xff0c;SQL最重要的增删改命令格式 1&#xff0c;insert into 表名&#xff08;不写这个括号里面的内容就默认所有字段都要添加&#xff09; values&#xff08;&#xff09; 插入单条数据 2&#xff0c;insert into 表名 (里面是列名) values&#xff08;根据列名依次…

.Net-C#文件上传的常用几种方式

1.第一种上传方式,基本通用于.net所有的框架 [HttpPost][Route("Common/uploadFile1")]public string uploads(){HttpContextBase context (HttpContextBase)Request.Properties["MS_HttpContext"];//获取传统contextHttpRequestBase request context.Re…

阶段七-Day04-Spring03

一、Sping声明式事务 1. 编程式事务介绍 整个事务控制的代码都需要程序员自己编写。包含&#xff1a;开启事务&#xff08;openSession()&#xff0c;创建SqlSession时MyBatis底层自动创建Transaction对象&#xff09;、提交事务(session.commit())、回滚事务(session.rollba…

新型的铁塔基站“能源管家”

安科瑞 崔丽洁 引言&#xff1a;随着5G基站的迅猛发展&#xff0c;基站的能耗问题也越来越突出&#xff0c;高效可靠的基站配电系统方案&#xff0c;是提高基站能耗使用效率&#xff0c;实现基站节能降耗的重要保证&#xff0c;通过多回路仪表监测每个配电回路的用电负载情况&a…

Clickhouse学习笔记(9)—— 语法优化

ClickHouse 的 SQL 优化规则是基于 RBO(Rule Based Optimization&#xff09;实现的 官方数据集的使用 为了方便测试CK的语法优化规则&#xff0c;尝试使用官方提供的数据集&#xff1b; 需要使用的数据集是visits_v1和hints_v1&#xff1a; Anonymized Web Analytics Data …

Mysql基本知识

1.SQL分类 DDL【data definition language】 数据定义语言&#xff0c;用来维护存储数据的结构 代表指令: create, drop, alter DML【data manipulation language】 数据操纵语言&#xff0c;用来对数据进行操作 代表指令&#xff1a; insert&#xff0c;delete&#xff0c;up…

MapInfo Pro “偏移”命令

偏移对象的用途是什么&#xff1f; 将一个或多个地图对象移动特定距离和/或方向&#xff0c;并将其放置在可编辑层中。对象可以来自任何层。您可以在选择操作后聚合数据。 ​ “偏移对象”何时处于活动状态&#xff1f; 当“贴图”窗口为活动窗口时&#xff0c;该窗口具有可编…

2023数字科技生态大会-数字安全论坛 学习笔记

监管合规->价值创造的方向&#xff0c;在安全领域的发展方向-安全运营服务型 ICT->数字->数据 数字安全&#xff1a;网络安全数据安全 传统信息化以计算为核心&#xff0c;数字化以数据为核心 数字安全技术发展十大趋势&#xff1a; 一、 数字安全技术政策环境将不…

电热毯电热床上用品上架亚马逊美国站UL964测试标准要求

美国是一个对安全要求非常严格的国家&#xff0c;美国本土的所有电子产品生产企业早在很多年前就要求有相关检测。而随着亚马逊在全球商业的战略地位不断提高&#xff0c;境外的电子设备通过亚马逊不断涌入美国市场。“为保证消费者得安全&#xff0c;亚马逊始终强调带电得产品…

一文了解芯片测试项目和检测方法 -纳米软件

芯片检测是芯片设计、生产、制造成过程中的关键环节&#xff0c;检测芯片的质量、性能、功能等&#xff0c;以满足设计要求和市场需求&#xff0c;确保芯片可以长期稳定运行。芯片测试内容众多&#xff0c;检测方法多样&#xff0c;今天纳米软件将为您介绍芯片的检测项目都有哪…

【EDAS论文投稿】

背景 第一次使用这个系统投稿&#xff0c;不是很熟练甚至差点错过了投稿时间&#xff0c;所以记录一下投稿过程中出现的致命问题。 注册、登录就不用说了 登陆后选择自己的会议的symposia 添加文章信息&#xff1b;依次添加作者信息 在第三步长传文件时&#xff0c;系统提示…

Ultipa 支持OpenCypher,助力企业级应用发展

OpenCypher 是欧美图数据库厂家 Neo4j 基于其图查询语言Cypher 开发的一套开源图查询语言&#xff0c;该语言也是开发者们较为熟悉的图查询语言之一。 Ulitpa Graph&#xff08;嬴图&#xff09;于2022年6月实现的对OpenCypher 的支持&#xff0c;旨在让用户能够通过自己熟悉的…

springcloudalibaba入门详细使用教程

目录标题 一、简介二、SpringCloud Alibaba核心组件2-1、Nacos (配置中心与服务注册与发现)2-2、Sentinel (分布式流控)2-3、RocketMQ (消息队列)/RabbitMq/kafka2-4、Seata (分布式事务)2-5、Dubbo (RPC) 三、为什么大家看好 Spring Cloud Alibaba3-1、阿里巴巴强大的技术输出…

使用责任链模式实现登录风险控制

责任链模式 责任链模式是是设计模式中的一种行为型模式。该模式下&#xff0c;多个对象通过next属性进行关系关联&#xff0c;从而形成一个对象执行链表。当发起执行请求时&#xff0c;会从首个节点对象开始向后依次执行&#xff0c;如果一个对象不能处理该请求或者完成了请求…

福建科立讯通信 指挥调度管理平台RCE漏洞复现

0x01 产品简介 福建科立讯通信指挥调度管理平台是一个专门针对通信行业的管理平台。该产品旨在提供高效的指挥调度和管理解决方案&#xff0c;以帮助通信运营商或相关机构实现更好的运营效率和服务质量。该平台提供强大的指挥调度功能&#xff0c;可以实时监控和管理通信网络设…