文件上传专题

普通方式

  • action:地址
  • method:必须是post
  • enctype:是编码方式,传递文件,必须是,multipart/form-data

因为文件是二进制传输,不设置编码方式,只会传递文件名。

html 复制代码
<form action="http://localhost:8080/upload", method="post" enctype="multipart/form-data">
    姓名:<input type="text" name="name" /><br/>
    年龄:<input type="text" name="age" /> <br>
    头像:<input type="file" name="file" /> <br>
    <input type="submit" value="提交">
</form>

后端接收到的文件,其实是一个临时文件中存在的,并不是源文件。一般在C盘temp下

java 复制代码
@PostMapping
public String getLogin(String name, String age, MultipartFile file) throws IOException {
    String originalFilename = file.getOriginalFilename();
    Assert.isTrue(originalFilename != null, "请上传文件");
    String extension = originalFilename.substring(originalFilename.lastIndexOf("."));
    // 新文件名
    String s = UUID.randomUUID() + extension;
    // 保存文件
    file.transferTo(new File("D:\\yun\\" + s));
    return s;
}

配置接收

yml 复制代码
spring:
  servlet:
    multipart:
      # 单个文件大小
      max-file-size: 10MB
      # 单次请求大小
      max-request-size: 100MB

使用RAM用户访问密钥上传文件至 OSS

创建一个 Bucket

首先创建一个用户

创建一个权限策略

在用户页面,使用该权限策略

注意创建 AccessKey

创建时,会展示 access-key 和 secret-key,注意 secret-key 只会展示一次。

用于调用服务使用。

配置 Yml

在 Bucket 概述中记住这个

yml 复制代码
alibaba:
  cloud:
    access-key-id: 你的 access-key-id
    secret-access-key: 你的 secret-access-key
    oss:
      endpoint: oss-cn-beijing.aliyuncs.com

上传文件接口

maven

xml 复制代码
<dependency>
    <groupId>com.aliyun.oss</groupId>
    <artifactId>aliyun-sdk-oss</artifactId>
    <version>3.17.4</version>
</dependency>

配置Bean

java 复制代码
@Configuration
public class OSSConfig {

    @Bean(destroyMethod = "shutdown")
    public OSS endpoint(@Value("${alibaba.cloud.oss.endpoint}") String endpoint,
                        @Value("${alibaba.cloud.access-key-id}") String accessKeyId,
                        @Value("${alibaba.cloud.secret-access-key}") String secretAccessKey) {
        DefaultCredentialProvider defaultCredentialProvider =
                new DefaultCredentialProvider(accessKeyId, secretAccessKey);

        ClientBuilderConfiguration clientBuilderConfiguration = new ClientBuilderConfiguration();
        clientBuilderConfiguration.setSignatureVersion(SignVersion.V4);
        return OSSClientBuilder.create()
                .endpoint("https://" + endpoint)
                .credentialsProvider(defaultCredentialProvider)
                .clientConfiguration(clientBuilderConfiguration)
                .region(extractRegion(endpoint))
                .build();
    }

    /**
     * 获取 region
     */
    private String extractRegion(String endpoint) {
        if (endpoint == null) return null;
        int start = endpoint.indexOf("oss-");
        int end = endpoint.indexOf(".aliyuncs.com");
        if (start == -1 || end == -1 || start + 4 >= end)
            throw new IllegalArgumentException("Invalid endpoint: " + endpoint);
        return endpoint.substring(start + 4, end);
    }

}
java 复制代码
private final OSS ossClient;

@PostMapping
public String getLogin(MultipartFile file) throws IOException {
    String originalFilename = file.getOriginalFilename();
    Assert.isTrue(originalFilename != null, "请上传文件");
    String extension = originalFilename.substring(originalFilename.lastIndexOf("."));
    // 新文件名
    String s = UUID.randomUUID() + extension;

    // 调用 OSS 上传文件。
    toOSSFile(file.getInputStream(), s);

    return s;
}

public void toOSSFile(InputStream inputStream, String name) {
    String bucketName = "gulimaill-hi";
    PutObjectRequest putObjectRequest =
            new PutObjectRequest(bucketName, "test/" + name, inputStream);
    // 上传文件。
    ossClient.putObject(putObjectRequest);
}
相关推荐
天平6 小时前
油猴脚本创建webworker踩坑记录
前端·javascript·typescript
山河木马12 小时前
渲染管线-计算得到gl_Position(顶点着色器)之后续GPU流程
javascript·webgl·图形学
竹林81813 小时前
用 The Graph 查询链上数据实战:从手搓 RPC 到 Subgraph,我的 NFT 项目数据加载快了 10 倍
前端·javascript
karry_k13 小时前
MyBatis批量insert-select踩坑:useGeneratedKeys=true 可能让PostgreSQL返回大量插入结果
java·后端
karry_k13 小时前
PostgreSQL 在 MyBatis 中执行正常 SQL 失效:一次 DELETE USING 踩坑记录
java·后端
kyriewen15 小时前
别再每次都 Google 了:我整理了前端日常最常踩的 10 个 Git 坑,附速查表
前端·javascript·git
SmartBoyW16 小时前
深入ECMAScript规范:彻底搞懂JS隐式类型转换与底层ToPrimitive机制
前端·javascript
SamDeepThinking17 小时前
从源码到代码:MyBatis-Flex 与 MyBatis-Plus 的逐项对比
java·后端·程序员
用户8524950718417 小时前
解密 JavaScript 中的 this:谁才是真正的调用者?
javascript·面试
Heo17 小时前
Vite进阶用法详解
前端·javascript·面试