vue+SpringBoot的图片上传

前端VUE的代码实现

直接粘贴过来element-UI的组件实现

            <el-upload
        
            
            class="avatar-uploader"
            action="/uploadAvatar"   //这个action的值是服务端的路径,其他不用改
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>

后端springboot的代码实现

java 复制代码
package com.aqiuo.controller;


import com.aqiuo.entity.dto.Result;
import com.aqiuo.utils.RandomUtil;
import lombok.extern.slf4j.Slf4j;
import org.springframework.http.HttpRequest;
import org.springframework.util.ResourceUtils;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.util.UUID;

@RestController
@ResponseBody
@Slf4j
public class UploadAvatar {

    @RequestMapping(value = "/uploadAvatar",method = {RequestMethod.POST})
    public Result imgUpDown(@RequestParam("file") MultipartFile file, HttpServletRequest request) throws IOException {

        if(!file.isEmpty()) {

            String fileName = file.getOriginalFilename();

            String suffixName = fileName.substring(fileName.indexOf("."));
            //设置上传文件的保存地址目录
            String dirpath=request.getServletContext().getRealPath("/upload");
            System.out.println(dirpath);
            File parentFilePath=new File(dirpath);
            //如果保存文件不存在就先创建目录
            if(!parentFilePath.exists()) {
                parentFilePath.mkdir();
            }



            String fileNewName = UUID.randomUUID() + fileName;

            File newFile = new File(parentFilePath, fileNewName);
            file.transferTo(newFile);

            return Result.ok(newFile);
        }
        return null;
    }
}

易错地点:

文件的存储位置一定要明确

运行效果

相关推荐
每天一个秃顶小技巧5 分钟前
01.Golang 源码目录结构
开发语言·后端·golang
2401_8532757311 分钟前
Java IO 基础知识总结下
java·开发语言
我想睡到自然醒₍˄·͈༝·͈˄*₎◞ ̑15 分钟前
【Android】View的解析—滑动篇
android·java
诸神黄昏EX18 分钟前
Android 常用命令和工具解析之内存相关
android·java·开发语言
dreamsever26 分钟前
Glide源码学习
android·java·学习·glide
武昌库里写JAVA27 分钟前
SpringBoot+SpringCloud面试题整理附答案
java·开发语言·算法·spring·log4j
呼啦啦啦啦啦啦啦啦31 分钟前
每日刷题(有效括号序列,滑动窗口最大值,最小的K个数,寻找第K大)
java·前端·javascript
手握风云-33 分钟前
数据结构(Java版)第五期:ArrayList与顺序表(下)
java·数据结构·算法
蜗牛沐雨34 分钟前
Go语言中的sync.Pool详解:高效对象复用
java·jvm·golang
不会玩技术的技术girl43 分钟前
Java爬虫与淘宝API接口:深度解析销量和商品详情数据获取
java·开发语言·爬虫