base64万能上传---够你开发用十年

目录

一、model 代码准备

1.1 用于接受前端的base64的model 

2.2 用于查询文件的model

二、前端代码

2.1 在api 文件夹下 定义一个uploadApi.ts 

2.2 以添加商品为例 ，三个照片 可以选择 如何在前端里使用改组件？

2.3 商品列表 直接选择 照片数组里第0个元素显示即可。

三、后端代码

 3.1 UploadController

3.2 UploadService

3.3 UploadServiceImpl

---

一、model 代码准备

1.1 用于接受前端的base64的model 

Upload.java

package com.by.model;
import lombok.Data;
/**
 * <p>Project: wms-root - Upload</p>
 * <p>Powered by scl On 2024-02-26 11:31:52</p>
 * <p>上传文件时的参数：<p>
 * @version 1.0
 * @since 17
 */
@Data
public class Upload {
    private String name;
    private String base64;
}

2.2 用于查询文件的model

FileInfo.java

package com.by.model;

import lombok.Data;
/**
 * <p>Project: wms-root - FileInfo</p>
 * <p>Powered by scl On 2024-02-26 20:11:48</p>
 * <p>用于万能上传时查询文件的name,和url<p>
 * @version 1.0
 * @since 17
 */
@Data
public class FileInfo {
    private String name;
    private String url;
}

二、前端代码

2.1 在api 文件夹下 定义一个uploadApi.ts 

import http from "@/http/index";
export default {
  upload: {
    name: "上传文件",
    url: "/api/upload",
    call: async function name(params: any) {
      return await http.post(this.url, params);
    },
  },
  uploadExcel: {
    name: "上传文件",
    url: "/api/upload/excel",
    call: async function name(params: any) {
      return await http.post(this.url, params);
    },
  },
  select: {
    name: "获取图片列表",
    url: "/api/upload",
    call: async function name(params: any = {}) {
      return await http.get(this.url, params);
    },
  },
  write: {
    name: "excel文件下载",
    url: "/api/upload/write",
    call: async function name(params: any = {}) {
      return await http.get(this.url, params);
    },
  },
};

将 uploadApi.ts  放到 index.ts里 方便其他地方引用

import productApi from "./productApi";
import categoryApi from "./categoryApi";
import uploadApi from "./uploadApi";
import userApi from "./userApi";
import vendorApi from "./vendorApi";
import poApi from "./poApi";
import wareHouseApi from "./wareHouseApi";
import ioApi from "./ioApi";
import inventoryApi from "@/api/inventoryApi";
import ooApi from "@/api/ooApi";
export {
  productApi,
  categoryApi,
  uploadApi,
  userApi,
  vendorApi,
  poApi,
  wareHouseApi,
  ioApi,
  inventoryApi,
  ooApi,
};

2.2 以添加商品为例 ，三个照片 可以选择 如何在前端里使用改组件？

1. 在表单里 导入再引用
2. 

 <el-form-item label="商品图片" prop="img">
      <el-space>
        <Tuku v-model="formDate.img1"></Tuku>
        <Tuku v-model="formDate.img2"></Tuku>
        <Tuku v-model="formDate.img3"></Tuku>
      </el-space>
    </el-form-item>

 3. 接着在formData 里将三张照片先初始化为空

//表单数据
const formDate = reactive({
  name: "",
  subName: "",
  categoryId: "5",
  img1: "",
  img2: "",
  img3: "",
  price: 0,
  brief: "",
  seq: 1,
  tags: "",
});

4. 调用后端接口时候，由于后端只有img 字段，没有img1,img2,img3 所以 定义个数组，来操作数据

//钩子函数
onMounted(() => {});

//调用后端接口
const callProductApi = () => {
// 定义数组，并且添加三个元素
  let img = [];
  img.push(formDate.img1);
  img.push(formDate.img2);
  img.push(formDate.img3);
  let params = {
    name: formDate.name,
    subName: formDate.subName,
    categoryId: formDate.categoryId,
// 将img 内容以字符串分割 
    img: img.join(","),
    price: formDate.price,
    brief: formDate.brief,
    seq: formDate.seq,
    tags: "",
    lastUpdateBy: "admin",
  };
 productApi.insert.call(params).then((res: any) => {
    console.log(res);
    console.log("添加成功");
    ElMessage({
      message: "添加成功",
      type: "success",
    });
  });
};

2.3 商品列表 直接选择 照片数组里第0个元素显示即可。

   <el-table-column prop="img" label="商品图片">
      <template #default="scope">
        <img :src="scope.row.img.split(',')[0]" width="50px" height="50px" />
      </template>
    </el-table-column>

三、后端代码

application.properties 配置nginx作为 照片或者文件存放地址 配置localhost 别名

upload.path=D:/nginx-1.25.4/html/images/
upload.domain=http://img.beiyou.com:90

 3.1 UploadController

/*
 * Copyright (c) 2020, 2024,  All rights reserved.
 *
 */
package com.by.controller;

import cn.hutool.core.codec.Base64;
import cn.hutool.core.date.StopWatch;
import cn.hutool.core.util.StrUtil;
import cn.hutool.poi.excel.ExcelReader;
import cn.hutool.poi.excel.ExcelUtil;
import cn.hutool.poi.excel.ExcelWriter;
import com.by.dao.InventoryDao;
import com.by.dao.PersonMapper;
import com.by.model.FileInfo;
import com.by.model.Inventory;
import com.by.model.Upload;
import com.by.service.UploadService;
import com.by.upload.Person;
import org.apache.ibatis.session.ExecutorType;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.web.bind.annotation.*;

import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import java.io.ByteArrayInputStream;
import java.io.IOException;
import java.util.List;
import java.util.stream.Collectors;

/**
 * <p>Project: wms-root - UploadController</p>
 * <p>Powered by scl On 2024-02-26 11:32:45</p>
 * <p>描述：<p>
 * @version 1.0
 * @since 17
 */
@RestController
@RequestMapping("/api/upload")
public class UploadController {
    @Autowired
    private UploadService uploadService;
    @Autowired
    private SqlSessionFactory sqlSessionFactory;
    @Autowired
    private PersonMapper personMapper;
    @Autowired
    private InventoryDao inventoryDao;

    /**
     * 上传文件
     * @param upload
     * @return
     */
    @PostMapping
    public String upload(@RequestBody Upload upload){
        return uploadService.upload(upload);
    }

    /**
     * 查询图片
     * @return
     */
    @GetMapping
    public List<FileInfo> select(){
        return uploadService.select();
    }

    /**
     * 导入excle
     * @param uploadInfo
     * @return
     * @throws Exception
     */
    @PostMapping("/excel")
    public String uploadExcel(@RequestBody Upload uploadInfo) throws Exception {
        String name = uploadInfo.getName();
        String base64 = uploadInfo.getBase64();
        String[] strArray = StrUtil.splitToArray(base64, "base64,");
        byte[] bytes = Base64.decode(strArray[1]);

        //用于创建一个基于字节数组的输入流。它允许你从一个字节数组中读取数据。
        ByteArrayInputStream byteArrayInputStream = new ByteArrayInputStream(bytes);
        // 使用Hutool读取Excel文件
        ExcelReader reader = ExcelUtil.getReader(byteArrayInputStream);
        //将读取到的 reader 转化为 List<T>集合
        List<Person> persons = reader.readAll(Person.class);

        //StopWatch类是 Hutool 工具库中的类,用于测量代码执行时间
        //StopWatch stopWatch = new StopWatch();
        //读取数据的结束时间同时也是写入数据库的开始时间
        //stopWatch.start();

        //sqlSessionFactory是通过ioc容器注入的  设置其SqlSession的执行器格式ExecutorType.SIMPLE（默认）
        SqlSession sqlSession = sqlSessionFactory.openSession(ExecutorType.BATCH);
        PersonMapper mapper = sqlSession.getMapper(PersonMapper.class);
        //循环将List<Man>中的数据插入数据库 方法一
        //for (Person person : persons) {
        //    PoItemMapper.xml.insert(person);
        //}
        //方法二：
        mapper.insertBatch(persons);
        sqlSession.commit();
        //stopWatch.stop();
        sqlSession.close();
        //System.out.println("插入数据库最终的结果为：" + stopWatch.getTotalTimeSeconds());

        return "ok";
    }

    /**
     * 导出Excel
     * @param response
     * @throws IOException
     */
    @GetMapping("/write")
    public void exportExcel(HttpServletResponse response) throws IOException {
        // 创建Excel写入器   参数 true 表示追加数据，即在已有的 Excel 文件上追加新数据。如果设为 false，则会覆盖已有的数据。
        List<Inventory> inventories = inventoryDao.select(null);

        // 创建ExcelWriter对象
        ExcelWriter writer = ExcelUtil.getWriter(true);
        int i = 0;
        while (true) {
            List<Inventory> list = inventories.stream().skip(i * 5).limit(5).parallel().collect(Collectors.toList());
            if (list.isEmpty()) {
                // list中没有数据就跳出
                break;
            }
            writer.setSheet("person" + i);
            // 写入表头
            // 写入当前批次的数据
            writer.write(list, true);
            i++;
        }
        //response为HttpServletResponse对象   设置响应的内容类型为Excel文件
        response.setContentType("application/xlsx;charset=utf-8");
        //test.xls是弹出下载对话框的文件名，不能为中文，中文请自行编码
        //设置响应头，告诉浏览器以附件形式下载文件，文件名为test.xlsx。这样设置可以让浏览器弹出文件下载对话框。
        response.setHeader("Content-Disposition", "attachment;filename="+"test.xlsx");
        //获取响应输出流，它是用于将响应的数据发送给客户端的流。
        ServletOutputStream out = response.getOutputStream();
        //将Excel数据写入输出流。第二个参数为true表示追加写入，即将数据追加到已有的Excel文件中。
        writer.flush(out, true);
        writer.close();
        //关闭输出流
        out.close();
    }

}

3.2 UploadService

package com.by.service;

import com.by.model.FileInfo;
import com.by.model.Upload;

import java.util.List;

/**
 * <p>Project: wms-root - UploadService</p>
 * <p>Powered by scl On 2024-02-26 11:35:31</p>
 * <p>描述：<p>
 * @version 1.0
 * @since 17
 */
public interface UploadService {
    /**
     * 上传文件
     * @param upload
     * @return
     */
    String upload(Upload upload);

    /**
     * 查询文件信息
     * @return
     */
    List<FileInfo> select();
}

3.3 UploadServiceImpl

/*
 * Copyright (c) 2020, 2024,  All rights reserved.
 *
 */
package com.by.serviceImpl;

import cn.hutool.core.codec.Base64;
import cn.hutool.core.io.FileUtil;
import cn.hutool.core.util.IdUtil;
import cn.hutool.core.util.StrUtil;
import cn.hutool.extra.pinyin.PinyinUtil;
import com.by.model.FileInfo;
import com.by.model.Upload;
import com.by.service.UploadService;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;

import java.util.List;
import java.util.stream.Collectors;

/**
 * <p>Project: wms-root - UploadServiceImpl</p>
 * <p>Powered by scl On 2024-02-26 11:36:43</p>
 * <p>描述：<p>
 * @version 1.0
 * @since 17
 */
@Service
public class UploadServiceImpl implements UploadService {

    //导入配置文件中的定义的属性
    @Value("${upload.path}")
    private String uploadPath;
    @Value("${upload.domain}")
    private String uploadDomain;

    /**
     * 上传文件
     *
     * @param upload
     * @return
     */
    @Override
    public String upload(Upload upload) {
        String name = upload.getName();
        String base64 = upload.getBase64();
        //分割字符串
        String[] base64Array = StrUtil.splitToArray(base64, "base64,");
        //转换为字节
        byte[] decode = Base64.decode(base64Array[1]);
        //将有汉字的文件名转换为拼音
        name = PinyinUtil.getPinyin(name, "");
        //生成唯一的文件名
        String newName = System.currentTimeMillis() + "_" + name;
        //写入文件夹
        FileUtil.writeBytes(decode, uploadPath + newName);
        if (name.endsWith(".xlsx") || name.endsWith(".xls")) {
            return uploadDomain + "/images/icon/excel.png";
        }
        return uploadDomain + "/images/" + newName;
    }


    @Override
    public List<FileInfo> select() {
        List<String> names = FileUtil.listFileNames(uploadPath);
        List<String> names2 = names.stream().sorted().collect(Collectors.toList());
        List<FileInfo> lst = names2.stream().map(name -> {
            FileInfo fileInfo = new FileInfo();
            fileInfo.setName(name);
            if (name.endsWith(".xlsx") || name.endsWith(".xls")) {
                fileInfo.setUrl(uploadDomain + "/images/icon/excel.png");
            } else {
                fileInfo.setUrl(uploadDomain + "/images/" + name);
            }
            return fileInfo;
        }).collect(Collectors.toList());

        return lst;
    }
}