element-plus文件上传（单个、多个，转Base64编码

效果

Video_20230103022111[00-00-00--00-00-16].gif

pom.xml依赖

  <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.2.2</version>
        </dependency>
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.4</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>4.0.0</version>
            <scope>provided</scope>
        </dependency>

前端页面

 <template>
  <el-upload class="upload-demo" 
     action="" 
     :auto-upload="false" 
     multiple="true" 
     :on-change="onchange">
    <template #trigger>
      <el-button type="primary">选择文件</el-button>
    </template>

    <el-button class="ml-3" type="success" @click="submitUpload">
      上传
    </el-button>

    <template #tip>
      <div class="el-upload__tip">
        jpg/png files with a size less than 500kb
      </div>
    </template>
  </el-upload>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
//保存要上传的文件
let myFiles = ref([])

//选择文件
let onchange = (file) => {
  myFiles.value.push(file.raw)
  console.log('-------------' + myFiles.value)
}

//上传文件
const submitUpload = () => {
    //跟表单一起上传
    //let formData = new FormData();
   // for (let i = 0; i < myFiles.value.length; i++) {
   //     formData.append('myFiles', myFiles.value[i]);
    //}

    //formData.append('username', insertUser.value.username);
   // formData.append('userpass', insertUser.value.userpass);


   //一个一个上传
  for (let i = 0; i < myFiles.value.length; i++) {
    //手动添加表单，将文件追加到表单里
    let fd = new FormData();
    fd.append('myFiles', myFiles.value[i])

    axios({
      url: 'http://localhost:8088/fileUpload/uploadtodisk',       //上传服务器接口
      //url: 'http://localhost:8088/fileUpload/uploadtodatabase', //上传数据库接口
      method: 'post',
      data: fd,
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
      .then((res) => {
        if (res.data == 'ok') {
          ElMessage({
            message: '上传成功.',
            type: 'success',
          })
        } else {
          ElMessage({
            message: '上传失败.',
            type: 'warning',
          })
        }
      })

  }
}

</script>

后台controller

 package com.neusoft.humanresources.controller;

import com.neusoft.humanresources.po.User;
import com.neusoft.humanresources.service.UserService;
import org.springframework.web.bind.annotation.RequestBody; 


import java.io.File;
import java.io.IOException;
import java.io.InputStream;
import java.util.Base64;
import java.util.Base64.Encoder; 
import java.util.UUID;

import javax.servlet.http.HttpServletRequest;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller; 
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;


@Controller
public class UserController {
    @Autowired
    UserService userService;

    @ResponseBody
    @PostMapping("/uploadtodisk")
    public String uploadtodisk(MultipartFile myFiles, HttpServletRequest request) throws IOException {
        System.out.println("上传到服务器目录");
        // 服务器上对应存放图片的路径
        String path = request.getServletContext().getRealPath("images");

        // 上传到服务器的新文件名
        String newFileName = UUID.randomUUID()
                + myFiles.getOriginalFilename().substring(myFiles.getOriginalFilename().lastIndexOf("."));

        // 上传到服务器，返回前端结果
        return uploadFile(path, newFileName, myFiles);
    }

    // 上传服务器方法

    public String uploadFile(String path, String newFileName, MultipartFile myFile) {
        File targetFile = new File(path + File.separator + newFileName);

        try {
            myFile.transferTo(targetFile);
            return "ok";
        } catch (Exception e) {
            return "error";
        }

    }
    //------------------------------------------------------------------------------------------
    @ResponseBody
    @PostMapping("/uploadtodatabase")
    public String uploadtodatabase(MultipartFile myFiles) {
        System.out.println("上传到数据库");

        try {
            // 向数据库上传Base64格式图片
            String upic = getImageStr(myFiles.getInputStream());
            System.out.println("Base64编码之后：" + upic);
            userService.insertUser(new User(null, "zhangsan",upic,  20));
            return "ok";
        } catch (IOException e) {
            e.printStackTrace();
            return "error";
        }
    }

    // 向数据库上传Base64格式图片

    private String getImageStr(InputStream inputStream) {
        byte[] data = null;
        try {
            data = new byte[inputStream.available()];
            inputStream.read(data);
            inputStream.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
        // 编码
        Encoder encoder = Base64.getEncoder();
        return encoder.encodeToString(data);
    }

    //获取头像
    @ResponseBody
    @PostMapping("/gettodatabase")
    public User gettodatabase(@RequestBody User user){
        System.out.println(user);
        return userService.gettodatabase(user.getUserId());
    }

}

---

读取的话

<template>
    <div class="home">
        <div class="block" >
            <el-avatar :size="50" :src="circleUrl" />
        </div>
    </div>
</template>
  
<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
axios.defaults.withCredentials=true;
    let circleUrl = ref("")
    let user = ref({
        userId:1
    })
    axios.post(  'http://localhost:8089/humanresources/gettodatabase',user.value)
      .then((res) => {
        console.log(res)
        if (res.data != null) {
          ElMessage({
            message: '获取成功.',
            type: 'success',
          })
          circleUrl.value = 'data:image/png;base64,'+res.data.userPic;
        } else {
          ElMessage({
            message: '获取失败.',
            type: 'warning',
          })
        }
      })
</script>

user对象

@Data
public class User {
    Integer userId;
    String userName;
    String userPic;
    Integer userAge;
}

UserMapper

@Mapper
public interface UserMapper {

    @Insert("insert into user(userId,userName,userPic,userAge) values(#{userId},#{userName},#{userPic},#{userAge})")
    void insertUser(User user);

    @Select("select * from user where userId=#{userId}")
    User gettodatabase(Integer userId);
}

user表

DROP TABLE IF EXISTS `user`;
CREATE TABLE `user`  (
  `userId` int NOT NULL AUTO_INCREMENT,
  `userName` longtext CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL,
  `userPic` longtext CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL,
  `userAge` int NULL DEFAULT NULL,
  PRIMARY KEY (`userId`) USING BTREE
)