vue+springboot 上传单张图片（jpg/png）

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