苍穹外卖(五)文件上传

1、简介
  • 文件上传,是指将本地图片、视频、音频、等文件上传到服务器,供其他用户浏览下载的过程
  • 文件上传在项目中应用非常广泛,我们经常发微博、发微信朋友圈都用到了文件上传功能

image-20240512205748833

2、如何进行图片传输

前端页面三要素:

  1. 表单项 type = “file”: 在 HTML 表单中,确保你的文件上传字段使用了 input 标签,且 type 属性设置为 "file"。这样用户就可以通过点击按钮或者拖拽文件的方式选择要上传的图片文件。

    htmlCopy code<form action="/upload" method="post" enctype="multipart/form-data">
        <input type="file" name="imageFile">
        <!-- 其他表单项 -->
        <button type="submit">上传</button>
    </form>
    
  2. 表单提交方式 post: 确保你的表单提交方式为 POST 方法,因为文件上传通常需要发送大量数据,POST 方法更适合这种情况。

  3. 表单的 enctype 属性 multipart/form-data: 当表单中包含文件上传时,确保你设置了 enctype 属性为 "multipart/form-data",这样表单数据将以多部分形式进行编码,包括文件数据。

服务端接收文件:

  1. 使用 request.getInputStream() 解析文件数据: 在 Spring MVC 中,可以通过 HttpServletRequest 对象的 getInputStream() 方法获取请求的输入流,从而获取上传的文件数据。
  2. 封装数据给 MultipartFile Spring 框架提供了 MultipartFile 接口用于表示上传的文件。你可以将从 request.getInputStream() 获取的文件数据封装成 MultipartFile 对象,以便在 Spring MVC 中更方便地处理文件上传。
  3. 通过 MultipartFile 对象操作文件: 一旦文件被封装成 MultipartFile 对象,你就可以通过这个对象获取文件的内容、文件名、大小、内容类型等信息。此外,你还可以使用 MultipartFile 对象提供的方法将文件保存到服务器的任意位置。

整体流程就是,前端页面通过表单上传图片文件,服务端接收到请求后解析文件数据并保存或处理文件。

3、本地存储文件上传

当客户端发送 POST 请求到 /admin/common/upload 接口时,服务端会接收到上传的文件,并将其存储在本地服务器磁盘的指定目录中。

具体流程如下:

  1. 首先,服务端通过 @PostMapping("/upload") 注解将 /admin/common/upload 接口映射到了 upload() 方法。
  2. upload() 方法中,通过方法参数 MultipartFile file 接收客户端上传的文件数据。
  3. 生成一个唯一的文件名,确保文件名的唯一性。这里使用了原始文件名的后缀作为新文件名的后缀,并且在文件名前面添加了 UUID 以确保唯一性。
  4. 使用 transferTo() 方法将文件保存到本地服务器磁盘的指定目录中。这里直接使用了硬编码的路径 "d:\\file\\img\\",你也可以根据自己的需求进行配置。
  5. 最后,返回一个成功的结果给客户端,通知文件上传成功。
@RestController
@RequestMapping("/admin/common")
@Slf4j
public class CommonController {

    @PostMapping("/upload")
    public Result upload(MultipartFile file) throws IOException {
        //获取上传文件存储到D:\file\img目录下,并文件名使用uuid生成

        //1、生成唯一文件名
        //获取原始文件名
        String originalFilename = file.getOriginalFilename();
        String extName = originalFilename.substring(originalFilename.lastIndexOf("."));

        //定义唯一文件名
        String fileName = UUID.randomUUID() + extName;

        //2、保存到磁盘上
        file.transferTo(new File("d:\\file\\img\\"+fileName));

        //3、返回成功
        return Result.success();
    }
}

**注意:**在SpringBoot,文件上传,默认单个文件允许最大大小为1m,如果需要上传大文件,可以进行如下配置

servlet:
  multipart:
    max-file-size: 10MB  #一次请求上传单个文件限制
    max-request-size: 100MB #一次请求上传多个文件限制
4、云服务器存储-oss

使用aliyun oss需要导入依赖

<dependency>
   <groupId>com.aliyun.oss</groupId>
    <artifactId>aliyun-sdk-oss</artifactId>
</dependency>

可以参考官方提供的文件上传

阿里云:如何使用JavaSDK简单上传文件_对象存储(OSS)-阿里云帮助中心 (aliyun.com)

功能实现

在application-dev.yml添加oss信息

alioss:
	endpoint: 地址
	access-key-id: 密钥id
	access-key-secret: 密钥
	bucket-name: 块名

application.yml

alioss:
	endpoint: ${sky.alioss.endpoint}
	access-key-id: ${sky.alioss.access-key-id}
	access-key-secret: ${sky.alioss.access-key-secret}
	bucket-name: ${sky.alioss.bucket-name}

读取oss配置

@Component
@ConfigurationProperties(prefix = "sky.alioss")
@Data
public class AliOssProperties {

    private String endpoint;
    private String accessKeyId;
    private String accessKeySecret;
    private String bucketName;
    
}

创建配置类

package com.sky.config;

import com.sky.properties.AliOssProperties;
import com.sky.utils.AliOssUtil;
import lombok.extern.slf4j.Slf4j;
import org.springframework.boot.autoconfigure.condition.ConditionalOnMissingBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

/**
 * 配置类,用于创建AliOssUtil对象
 */
@Configuration
@Slf4j
public class OssConfiguration {

    @Bean
    @ConditionalOnMissingBean
    public AliOssUtil aliOssUtil(AliOssProperties aliOssProperties){
        log.info("开始创建阿里云文件上传工具类对象:{}",aliOssProperties);
        return new AliOssUtil(aliOssProperties.getEndpoint(),
                aliOssProperties.getAccessKeyId(),
                aliOssProperties.getAccessKeySecret(),
                aliOssProperties.getBucketName());
    }
}

创建工具类

package com.sky.utils;

import com.aliyun.oss.ClientException;
import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.aliyun.oss.OSSException;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.extern.slf4j.Slf4j;
import java.io.ByteArrayInputStream;

@Data
@AllArgsConstructor
@Slf4j
public class AliOssUtil {

    private String endpoint;
    private String accessKeyId;
    private String accessKeySecret;
    private String bucketName;

    /**
     * 文件上传
     *
     * @param bytes
     * @param objectName
     * @return
     */
    public String upload(byte[] bytes, String objectName) {

        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

        try {
            // 创建PutObject请求。
            ossClient.putObject(bucketName, objectName, new ByteArrayInputStream(bytes));
        } catch (OSSException oe) {
            System.out.println("Caught an OSSException, which means your request made it to OSS, "
                    + "but was rejected with an error response for some reason.");
            System.out.println("Error Message:" + oe.getErrorMessage());
            System.out.println("Error Code:" + oe.getErrorCode());
            System.out.println("Request ID:" + oe.getRequestId());
            System.out.println("Host ID:" + oe.getHostId());
        } catch (ClientException ce) {
            System.out.println("Caught an ClientException, which means the client encountered "
                    + "a serious internal problem while trying to communicate with OSS, "
                    + "such as not being able to access the network.");
            System.out.println("Error Message:" + ce.getMessage());
        } finally {
            if (ossClient != null) {
                ossClient.shutdown();
            }
        }

        //文件访问路径规则 https://BucketName.Endpoint/ObjectName
        StringBuilder stringBuilder = new StringBuilder("https://");
        stringBuilder
                .append(bucketName)
                .append(".")
                .append(endpoint)
                .append("/")
                .append(objectName);

        log.info("文件上传到:{}", stringBuilder.toString());

        return stringBuilder.toString();
    }
}

开发上传接口

@RestController
@RequestMapping("/admin/common")
@Slf4j
public class CommonController {

    @Autowired
    private AliOssUtil aliOssUtil;

    @PostMapping("/upload")
    public Result upload(MultipartFile file) throws IOException {
        //获取上传文件存储到D:\file\img目录下,并文件名使用uuid生成

        //1、生成唯一文件名
        //获取原始文件名
        String originalFilename = file.getOriginalFilename();
        String extName = originalFilename.substring(originalFilename.lastIndexOf("."));

        //定义唯一文件名
        String fileName = UUID.randomUUID() + extName

        try {
            //上传到oss
            String path = aliOssUtil.upload(file.getBytes(), fileName);

           //返回成功
            return Result.success(path);
        } catch (IOException e) {
            
            log.error("上传失败{}",e.getMessage());

            return Result.error(MessageConstant.UPLOAD_FAILED);
        }
    }
}
  • 19
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
黑马程序员苍穹外卖项目中的Nginx配置文件可以根据具体需求进行配置。根据引用\[1\]中的描述,可以通过双击nginx.exe启动Nginx,并在http://localhost/访问前端页面。这意味着Nginx的配置文件应该包含有关前端页面的相关配置。另外,根据引用\[2\]中的描述,Nginx还可以用作反向代理和负载均衡,因此配置文件还应包含有关反向代理和负载均衡的相关配置。最后,根据引用\[3\]中的描述,苍穹外卖项目还需要与第三方配送公司进行对接和管理,因此配置文件还应包含有关与第三方配送公司对接的相关配置。综上所述,黑马程序员苍穹外卖项目的Nginx配置文件应包含前端页面的相关配置、反向代理和负载均衡的相关配置以及与第三方配送公司对接的相关配置。 #### 引用[.reference_title] - *1* [黑马程序员_Java项目实战《苍穹外卖》_Day01_开发环境搭建](https://blog.csdn.net/BallerWang9/article/details/131824385)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [最适合新手的SpringBoot+SSM项目《苍穹外卖》实战—(一)项目概述](https://blog.csdn.net/qq_20185737/article/details/131575898)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小林学习编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值