axios+springboot上传图片到本地(vue)

news2024/11/23 19:11:39

结果:

前端文件:

<template>

   <div>

    <input type="file" id="file" ref="file" v-on:change="handleFileUpload()"/>

    <button @click="submitFile">上传</button>

  </div>

</template>

<script>

 import axios from 'axios';

 export default {

   

    data(){

      return {

        file: ''

      }

    },

    methods: {

      submitFile(){

            let formData = new FormData();

            formData.append('file', this.file);

            axios.post( 'http://localhost:8080/upload/photos',

                formData,

                {

                headers: {

                    'Content-Type': 'multipart/form-data'

                }

              }

            ).then(function(){

          console.log('SUCCESS!!');

        })

        .catch(function(){

          console.log('FAILURE!!');

        });

      },

      handleFileUpload(){

        this.file = this.$refs.file.files[0];

      }

    }

  }

</script>

<style scoped>

  .btn_pos{

      margin-top: 0px;

  }

</style>

后端代码:

@CrossOrigin
@RestController
@RequestMapping("/upload")
public class ImageController {
private final String UPLOAD_PATH = "D:/Download/";//写上你需要上传的本地路径(模拟服务器)

@PostMapping("/photos")
public ResponseEntity<String> uploadFile(@RequestParam MultipartFile file) {
    // ... File upload logic ...
    if (file.isEmpty()) {
        System.out.println("文件为空");
        return new ResponseEntity<>("文件不能为空", HttpStatus.BAD_REQUEST);
    }
    try {
        byte[] bytes = file.getBytes();
        Path path = Paths.get(UPLOAD_PATH + File.separator + file.getOriginalFilename());
        System.out.println("path: " + path);
        Files.write(path, bytes);
        return new ResponseEntity<>("文件上传成功", HttpStatus.OK);
    } catch (IOException e) {
        e.printStackTrace();
        return new ResponseEntity<>("文件上传失败", HttpStatus.INTERNAL_SERVER_ERROR);
    }
}

另一种方式:HTTP请求 

使用elementplus组件<el-upload>:

<template>

  <div>

    <el-upload

      drag

      action="http://localhost:8080/upload/photos"

      :on-success="handleUploadSuccess"

      :on-error="handleUploadError"

    >

      <i class="el-icon-upload"></i>

      <div class="el-upload__text">拖拽文件到此处上传</div>

    </el-upload>

  </div>

</template>

<script>

export default {

methods: {

  handleUploadSuccess(response, file) {

    this.$message.success('文件上传成功');

  },

  handleUploadError(err, file) {

    this.$message.error('文件上传失败');

  }

}

};

</script>

后端代码与前面一样。

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

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

相关文章

centos7 的redis的安装

文章目录 查看本机redis⾸先安装 scl 源, 再安装 redis 基本配置启动redis停止redis 查看本机redis ⾸先安装 scl 源, 再安装 redis 安装scl源 yum install centos-release-scl-rh安装redis5 yum install rh-redis5-redis安装成功 基本配置 修改etc/redis/redis.conf 文件…

javaWeb网上订餐管理系统

一、简介 在当今社会&#xff0c;随着互联网的普及&#xff0c;网上订餐已经成为了人们生活中不可或缺的一部分。为了方便用户点餐&#xff0c;同时也方便商家管理订单&#xff0c;我设计了一个基于JavaWeb的网上订餐管理系统。该系统分为前台和后台两部分&#xff0c;前台包括…

解决多线程场景下ThreadLocal的变量传递问题

问题描述&#xff1a; ThreadLocal可以用于存储线程独享的变量。可以方便的存储上下文信息&#xff0c;提升代码的简洁性。 然而&#xff0c;ThreadLocal的一个不足之处在于&#xff0c;它不支持在线程嵌套过程中自动地将数据从父线程传递到子线程。这意味着&#xff0c;即使…

面试笔记——框架篇Spring系列(Spring、SpringMVC、SpringBoot)

Spring 线程安全 singleton : bean在每个Spring IOC容器中只有一个实例。 prototype&#xff1a;一个bean的定义可以有多个实例。 问题一&#xff1a; Spring中的单例bean是否是线程安全的&#xff1f; ControllerRequestMapping("/user")public class UserContro…

Springboot+vue的旅游信息推荐系统设计与实现+数据库+论文+数据库表结构文档+免费远程调试

项目介绍: Springbootvue的旅游信息推荐系统设计与实现。Javaee项目&#xff0c;springboot vue前后端分离项目 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;通过Spring SpringBoot Mybati…

为何ChatGPT日耗电超50万度?

看新闻说&#xff0c;ChatGPT每天的耗电量是50万度&#xff0c;国内每个家庭日均的耗电量不到10度&#xff0c;ChatGPT耗电相当于国内5万个家庭用量。 网上流传&#xff0c;英伟达创始人黄仁勋说&#xff1a;“AI的尽头是光伏和储能”&#xff0c;大佬的眼光就是毒辣&#xff…

【云能耗管理系统在某大型商场的应用】安科瑞Acrel-EIOT能源物联网平台方案

摘要&#xff1a;依据对上海市某大型商场现场考察的结果&#xff0c;提出通过建设云能耗管理系统的方案来改善商场能耗的管理现状。首先充分搜集建筑信息和设备运行工况&#xff0c;合理设计系统实施方案&#xff0c;解决现场数据采集和传输障碍&#xff0c;完成云能耗管理系统…

Python 全栈体系【四阶】(十九)

第五章 深度学习 一、基本理论 4. 神经网络的改进 4.3 循环神经网络 4.3.1 标准 CNN 模型的不足 假设数据之间是独立的。标准 CNN 假设数据之间是独立的&#xff0c;所以在处理前后依赖、序列问题&#xff08;如语音、文本、视频&#xff09;时就显得力不从心。这一类数据…

解决 cv2.imread读取带中文路径图片问题

http://t.csdnimg.cn/i8CXn 1.问题&#xff1a; # 中草药数据集样本可视化展示 import cv2 import matplotlib.pyplot as plt %matplotlib inline plt.title("heshouwu") plt.imshow(cv2.imread(r"D:\home\aistudio\data1\archive\train\何首乌\heshouwu_0001.…

各大pdf转word软件都用的哪家的ocr引擎?

国内一般的PDF软件一般都调用某国际PDF原厂的OCR接口&#xff0c;但这家公司是主要做PDF&#xff0c;在OCR方面并不专注&#xff0c;一些不是很复杂的场景还能应付得过来&#xff0c;复杂一点的效果就强差人意了&#xff0c;推荐用金鸣表格文字识别系统&#xff0c;它主要有以下…

位段详细解释

结构体位段的使用原则 在C语言中&#xff0c;结构体&#xff08;Struct&#xff09;是一种复合数据类型&#xff0c;它允许我们将多个不同类型的数据项组合成一个单一的实体。位段&#xff08;Bit Field&#xff09;是结构体中的一个特殊成员&#xff0c;它允许我们只取结构体…

专注无线MCU:STM32WL33CCV6A、STM32WL33CCV7A、STM32WL33K8V7TR、STM32WL33KBV7TR设计用于RF无线应用

一、STM32WL33CC &#xff1a;Sub-GHz无线微控制器&#xff0c;单核Arm Cortex-M0 概述 STM32WL33xx是一款高性能超低功耗无线应用处理器&#xff0c;用于1 GHz以下频段的RF无线应用。它设计用于在免许可ISM和SRD频段&#xff08;如433、868和915 MHz&#xff09;下工作。 …

Apache Spark

一、Apache Spark 1、Spark简介 Apache Spark是用于大规模数据 (large-scala data) 处理的统一 (unified) 分析引擎。 Spark官网 Spark最早源于一篇论文Resilient Distributed Datasets: A Fault-Tolerant Abstraction for In-Memory Cluster Computing,该论文是由加州大学柏…

网络安全-文件包含

一、php://input 我们先来看一个简单的代码 <meta charset"utf8"> <?php error_reporting(0); $file $_GET["file"]; if(stristr($file,"php://filter") || stristr($file,"zip://") || stristr($file,"phar://&quo…

Python---常用的web框架

目录 Django创建Django项目启动Django项目引入APP视图函数例如纯文本JSON格式数据重定向渲染页面返回错误提示 FlaskPyramidTornado Django 特点&#xff1a;Django是一个全功能的Web框架&#xff0c;提供了许多内置的功能和工具&#xff0c;如ORM、表单处理、认证等。它的设计…

AWS EC2 学习之: 使用 PuTTY 从 Windows 连接到 Linux 实例

启动您的实例之后&#xff0c;您可以连接到该实例&#xff0c;然后像使用您面前的计算机一样来使用它。 注意 启动实例后&#xff0c;需要几分钟准备好实例&#xff0c;以便您能连接到实例。检查您的实例是否通过了状态检查。您可以在 Instances 页上的 Status Checks 列中查…

Python基础学习笔记(二)

Python基础语法 注释 注释有: 单行注释、多行注释、文档注释。 单行注释采用 # 符号,后面跟随的都是注释内容多行注释采用 (三个单引号) 或者 """(三个双引号) 包围文档注释采用 """ 包围&#xff0c;一般出现在模块&#xff0c;类&#xff0c;…

AI:Nvidia官网人工智能大模型工具合集(文本生成/图像生成/视频生成)的简介、使用方法、案例应用之详细攻略

AI&#xff1a;Nvidia官网人工智能大模型工具合集(文本生成/图像生成/视频生成)的简介、使用方法、案例应用之详细攻略 目录 Nvidia官网人工智能大模型工具合集的简介 1、网站主要功能包括: Nvidia官网人工智能大模型工具合集的使用方法 1、SDXL-Turbo的使用 2、GEMMA-7B的…

MySQL三种开窗函数详细用法,图文详解

开窗函数的详细用法 第一章、开窗函数的语法1.1&#xff09;从聚合开窗函数讲起1.2&#xff09;开窗函数之取值1.3&#xff09;排名开窗函数 第一章、开窗函数的语法 开窗函数的语法为&#xff1a;over(partition by 列名1 order by 列名2 )&#xff0c;括号中的两个关键词par…

MP4如何把视频转MOV格式? MP4视频转MOV格式的技巧

在现代的数字媒体时代&#xff0c;视频格式转换成为了许多用户必须掌握的技能。特别是将MP4视频转换为MOV格式&#xff0c;这对于需要在Apple设备上播放或编辑视频的用户来说尤为重要。本文将详细介绍如何将MP4视频转换为MOV格式&#xff0c;帮助读者轻松应对不同设备和平台的需…