文件上传（本地、OSS）

2024-07-07 06:56:40

什么是文件上传：将文件上传到服务器。

文件上传-本地存储

前端

<template>
<div>
    <!-- 上传文件需要设置表单的提交方式为post，并设置enctype属性、表单项的type属性设置为file -->
    <form action="http://localhost:8080/wedu/upload" method="post" enctype="multipart/form-data">
    姓名:<input type="text" name="username"><br>
    年龄:<input type="text" name="age"><br>
    头像:<input type="file" name="image"><br>
    <input type="submit" value="提交">
  </form>
</div>
</template>

<script>
export default {

}
</script>

<style>

</style>

后端

因为要构造唯一的文件名，所以先来介绍一下uuid（通用唯一识别码,例如：d98b850e-7ad7-40c7-98ac-1d4f72b67124）

package org.test;

import org.junit.Test;
import org.springframework.boot.test.context.SpringBootTest;

import java.util.UUID;

@SpringBootTest
public class ApplicationTest {
    @Test
    public void testUuid(){
        for (int i = 0;i < 1000;i++){
            //调用java.util.UUID类的下述方法生成随机的UUID字符串
            String uuid = UUID.randomUUID().toString();
            System.out.println(uuid);
        }
    }
}

正式编写后端：

package com.wedu.modules.ColdChainVehicleDevice.controller;

import com.wedu.common.utils.R;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;
import java.util.UUID;

@RestController
@Slf4j
public class FileController {
    /*
    1、什么是文件上传：将文件上传到服务器
        * 前端提交过来的文件需要使用Spring提供的 MultipartFile类型的参数 来接收，
    无论是本地存储还是OSS存储文件MultipartFile的参数名必须和前端发送文件的请求参数名相同
        * 上传过来的文件是一个临时文件，当文件上传的请求响应完毕后，这个临时文件会被删除

    2、如何将服务端接收到的文件存储起来？
        * 本地存储：在服务端，接收到上传上来的文件后，将文件存储在本地服务器磁盘中。
     */
    @PostMapping("/upload")
    public R upload(String username, Integer age, MultipartFile image) throws Exception {
        //输出日志到控制台
        log.info("文件上传：{},{},{}",username,age,image);

        //获取原始文件名
        String originalFilename = image.getOriginalFilename();

        //构造唯一的文件名（文件名不能重复，不然会覆盖）- uuid（通用唯一识别码,例如：d98b850e-7ad7-40c7-98ac-1d4f72b67124）
        int index = originalFilename.lastIndexOf(".");  //获取到原始文件名最后一个点的位置
        String extname = originalFilename.substring(index);  //截取文件名的后缀
        String newFileName = UUID.randomUUID().toString() + extname;
        log.info("新的文件名：{}",newFileName);

        //将传过来的文件存储在服务器的本地磁盘目录中（D:\Desktop\wedu）
        image.transferTo(new File("D:\\Desktop\\wedu\\" + newFileName));

        return R.ok();
    }
}

SpringBoot配置文件

spring:
  servlet:
    multipart:
      max-file-size: 100MB    #配置单个文件上传的大小限制
      max-request-size: 100MB   #配置单个请求最大的文件大小限制
      enabled: true

MultipartFile接口的常用方法：

文件上传-阿里云OSS存储

阿里云

先来介绍一下阿里云，它对外提供了各种各样的云服务，如下图：

阿里云OSS

现在开始介绍阿里云OSS：

使用第三方服务的通用思路

阿里云OSS-使用步骤

官方SDK编写入门程序参照：

步骤：①安装->②配置访问凭证->③找到文件/对象中的上传文件中的简单上传的上传文件流部分复制代码

阿里云OSS官方文档

阿里云OSS-集成

在web项目中使用阿里云OSS的步骤：

package com.wedu.common.utils;

import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import org.springframework.web.multipart.MultipartFile;
import java.io.*;
import java.util.UUID;

/**
 * 阿里云 OSS 工具类
 */
public class AliOSSUtils {

    private String endpoint = "https://填你自己的地域节点";
    private String accessKeyId = "填你自己的accessKeyId";
    private String accessKeySecret = "填你自己的accessKeySecret";
    private String bucketName = "填你自己的存储桶名称";

    /**
     * 实现上传图片到OSS
     */
    public String upload(MultipartFile file) throws IOException {
        // 获取上传的文件的输入流
        InputStream inputStream = file.getInputStream();

        // 避免文件覆盖
        String originalFilename = file.getOriginalFilename();
        String fileName = UUID.randomUUID().toString() + originalFilename.substring(originalFilename.lastIndexOf("."));

        //上传文件到 OSS
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
        ossClient.putObject(bucketName, fileName, inputStream);

        //文件访问路径
        String url = endpoint.split("//")[0] + "//" + bucketName + "." + endpoint.split("//")[1] + "/" + fileName;
        // 关闭ossClient
        ossClient.shutdown();
        return url;// 把上传到oss的路径返回
    }

}

package com.wedu.modules.ColdChainVehicleDevice.controller;

import com.wedu.common.utils.AliOSSUtils;
import com.wedu.common.utils.R;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;
import java.util.UUID;

@RestController
@Slf4j
public class FileController {

    @Autowired
    private AliOSSUtils aliOSSUtils;

    @PostMapping("/upload")
    public R upload(MultipartFile image) throws IOException {
        log.info("文件上传，文件名：{}",image.getOriginalFilename());
        String url = aliOSSUtils.upload(image);  //调用阿里云OSS工具类将文件上传到阿里云OSS中
        log.info("文件上传完成，文件访问的url：{}",url);
        return R.ok().put("url",url);   //将图片上传到阿里云OSS后的url返回，用于浏览器回显展示
    }
}

最后在postman中测试成功：

码农公寓