ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue+springboot 上传单张图片(jpg/png)

2022-06-04 00:35:07  阅读:114  来源: 互联网

标签:vue springboot System jpg originalname file println import out


java后端

配置文件

#上传文件到vue路径中
file:
  uploadFolder: C:\Users\iMac\Desktop\front\src\image\

配置类uuid更改文件名字

package com.example.back.utils;

import java.util.UUID;

/**
 *
 * @项目: mail--cc.ccoder.mail.utils
 * @TODO: 生成随机字符串的工具类 uuid
 */
public class UuidUtil {

    public static String getUUID(){
         return UUID.randomUUID().toString().replace("-", "");
    }

    public static void main(String[] args) {
        System.out.println("格式前的UUID : " + UUID.randomUUID().toString());
        System.out.println("格式化后的UUID :" + getUUID());
    }
}

 

package com.example.back.controller;

import java.io.File;
import java.io.IOException;

import javax.servlet.http.HttpServletRequest;

import com.example.back.utils.UuidUtil;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

@CrossOrigin//解决跨域问题
@RestController
@RequestMapping("/file")
public class FileController {
    @Value("${file.uploadFolder}")
    private String uploadFolder;

    @RequestMapping("/upload")
    public String FileUpdate (HttpServletRequest request,MultipartFile file) {
        //配置文件设置想保存的路径
        String str=uploadFolder;
        //得到上传时的文件名字
         String originalname=file.getOriginalFilename();
        System.out.println("上传时的文件名字:"+originalname);
        
         //substring(originalname.lastIndexOf(".")截取图片名后缀
         String newName= originalname.substring(originalname.lastIndexOf("."));
        System.out.println("图片名字:"+originalname);
        System.out.println("截取图片名后缀:"+newName);
        
        String frontNewName= originalname.substring(0,originalname.lastIndexOf("."));
        System.out.println("图片名字:"+originalname);
        System.out.println("截取图片名前缀:"+frontNewName);
        
         //利用UUidUtil工具类生成新的文件名字
         newName = UuidUtil.getUUID()+newName;
         
           System.out.println(newName);
           System.out.println(str);
           File newFile=new File(str,newName);
           
           //获得文件目录,判断是否存在
           if(!newFile.getParentFile().exists()) {
               //如果path路径不存在,创建一个文件夹,存在则使用当前文件夹
               newFile.getParentFile().mkdirs();
           }
           try {
               //保存文件到指定路径之中
            file.transferTo(newFile);
        } catch (IllegalStateException | IOException e) {
        
            e.printStackTrace();
        }
           System.out.println("上传的文件路径:"+str+newName);
           return newName;


    }
}

 

vue前端

<el-upload
            class="upload-demo"
            action="http://localhost:8091/file/upload"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple="false"
            :limit="1"
            :on-exceed="handleExceed"
            :file-list="fileList"
            :on-success="handleAvatarSuccess"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件,且不超过500kb
            </div>
          </el-upload>
 //上传图片
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件,本次选择了 ${files.length} 个文件,共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}?`);
    },
    // 文件上传成功时的钩子
    handleAvatarSuccess(res, file) {
      this.form.leaveUrl = res;
      console.log(res);
      console.log(file);
    },

显示上传的图片(另一页面)

 <el-image
            style="width: 100px; height: 100px"
            :src="require('/src/image/' + leaveUrl)"
          >
          </el-image>

 

 

TRANSLATE with x English
Arabic Hebrew Polish
Bulgarian Hindi Portuguese
Catalan Hmong Daw Romanian
Chinese Simplified Hungarian Russian
Chinese Traditional Indonesian Slovak
Czech Italian Slovenian
Danish Japanese Spanish
Dutch Klingon Swedish
English Korean Thai
Estonian Latvian Turkish
Finnish Lithuanian Ukrainian
French Malay Urdu
German Maltese Vietnamese
Greek Norwegian Welsh
Haitian Creole Persian  
  TRANSLATE with COPY THE URL BELOW Back EMBED THE SNIPPET BELOW IN YOUR SITE Enable collaborative features and customize widget: Bing Webmaster Portal Back

标签:vue,springboot,System,jpg,originalname,file,println,import,out
来源: https://www.cnblogs.com/lyj0810/p/16341068.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有