Web-文件上传

需求

新增员工和修改员工的需求会需要上传对应的图像
先实现对应的新增需求吧
在这里插入图片描述
在这里插入图片描述
!!!@RequestBody,因为传参是json格式,还是看对应接口文档!!!

controller
在这里插入图片描述
service
在这里插入图片描述

mapper
在这里插入图片描述
xml
在这里插入图片描述
对应代码

<!--更新员工-->
    <update id="update">
        update emp
        <set>
            <if test="username != null and username != ''">
                username = #{username},
            </if>
            <if test="password != null and password != ''">
                password = #{password},
            </if>
            <if test="name != null and name != ''">
                name = #{name},
            </if>
            <if test="gender != null">
                gender = #{gender},
            </if>
            <if test="image != null and image != ''">
                image = #{image},
            </if>
            <if test="job != null">
                job = #{job},
            </if>
            <if test="entrydate != null">
                entrydate = #{entrydate},
            </if>
            <if test="deptId != null">
                dept_id = #{deptId},
            </if>
            <if test="updateTime != null">
                update_time = #{updateTime}
            </if>
        </set>
        where id = #{id}
    </update>

文件上传

在这里插入图片描述

简介

在这里插入图片描述
文件上传分两个程序
一个前端程序,一个服务端程序

前端

在这里插入图片描述

在这里插入图片描述

就定义一个表单,里面弄个input,type=“file”,来选择对应的图片
这是html标签里封装好的功能,且一般用post方式提交
因为可能文件比较大
对应enctype是表单编码格式,弄成=“multipart/form-data”(表单分多个部分提交)
因为普通默认编码格式不适合传输大型二进制数据

这里的请求方式是默认的
在这里插入图片描述
可以看到值传输了对应图片名字

在这里插入图片描述

服务端

在这里插入图片描述
在这里插入图片描述

前端对应action是对应请求路径这里是/upload
可以用一个MultipartFile类型参数来接收图片这种二进制文件
保证参数名和对应表单项名一样,如果不一样可以用
@RequestParam(“别名(表单名)”)来匹配对应表单名
进行完表单的提交后
服务端收到了对于数据,且会接收对应文件和属性属性和文件都会接收,每一个都对应一个tmp文件到一个指定文件夹
如图的location就是对应路径
在这里插入图片描述
在这里插入图片描述
把tmp改成txt就可以查看了

在这里插入图片描述

在这里插入图片描述

小结

在这里插入图片描述

本地存储

所谓本地存储就是
服务器端接收到客户端(浏览器)传过来的文件后存储在本地某个文件夹

那么怎么指定文件夹呢?
如图
只需,对应参数.transferTo(new File(路径))即可
但是文件名不能瞎命名,可以和它原始文件名一样,用image对象获取原始文件名即可
在这里插入图片描述

用postman测试一下
postman里面需要用post方式的form-data来提交对应文件
在这里插入图片描述
但这样其实还是有问题的,比如你1和2用户发的都是1.jpg这个文件
1先发的话,2后发的文件就会把1的文件覆盖掉

怎么解决呢?

UUID

在这里插入图片描述
对应输出的UUID
在这里插入图片描述

对应UUID进行的名称输出
还要考虑对应的后缀名
后缀名和文件名之间会有个.
直接从哪个.开始截取

int index=orginalFilename=lastIndexof(".");//获取对应索引
String extname=orginalFilename.substring(index);//直接截取到最后了
String newFilename=UUID.randomUUID().toString()+extname;//再组合一下就行

在这里插入图片描述

文件大小

我们传参可以发生错误
可能因为我们的文件太大了,springboot默认最大文件是1MB
我们需要进行配置了解除这个限制
在这里插入图片描述
如图
在这里插入图片描述

本地存储缺点

一般现在都是云存储了
这里主要是熟悉对应MultipartFile的方法
在这里插入图片描述

云存储(阿里云oss)

在这里插入图片描述
就是我们直接使用阿里给我们开发好的服务,就不需要自己开发
比如我们要实现短信发送,我们就可以直接用阿里云的短信服务
在这里插入图片描述
就是把对应的东西放到云存储器上
我们学习的是怎样去运用
在这里插入图片描述

根据对应完成注册,不用重置,直接开通oss服务
到这个界面
在这里插入图片描述
然后创建bucket即可

在这里插入图片描述
在这里插入图片描述
只写上面对应三个,下面那些都不用动
从头像处,获取对应秘钥Accesskey
在这里插入图片描述
这个界面,新建一个AccessKey
对应包含ID和Secret
对应后面有查看secret,获取就行
在这里插入图片描述

阿里云oss快速入门

操作的话找对应的说明文档
eclipse和IDEA没有maven项目正常是要导包
有maven导入对依赖即可,注意java9之后需要导入jaxb依赖
在这里插入图片描述

找到文件上传的操作代码
找到我们想要的上传文件大妈
cv一下
在这里插入图片描述
这里代码
代码和图里不一样,把ID和秘钥密码和本地文件地址改成从环境变量获取了

import com.aliyun.oss.ClientException;
import com.aliyun.oss.OSS;
import com.aliyun.oss.common.auth.*;
import com.aliyun.oss.OSSClientBuilder;
import com.aliyun.oss.OSSException;
import com.aliyun.oss.model.PutObjectRequest;
import com.aliyun.oss.model.PutObjectResult;
import java.io.InputStream;
import java.net.URL;

public class Demo {

    public static void main(String[] args) throws Exception {
        // Endpoint以华东1(杭州)为例,其它Region请按实际情况填写。
        String endpoint = "https://oss-cn-hangzhou.aliyuncs.com";
        // 强烈建议不要把访问凭证保存到工程代码里,否则可能导致访问凭证泄露,威胁您账号下所有资源的安全。本代码示例以从环境变量中获取访问凭证为例。运行本代码示例之前,请先配置环境变量。
        EnvironmentVariableCredentialsProvider credentialsProvider = CredentialsProviderFactory.newEnvironmentVariableCredentialsProvider();
        // 填写Bucket名称,例如examplebucket。
        String bucketName = "examplebucket";
        // 填写Object完整路径(就是文件名,你想在bucket让它以什么文件名保存你就写哪个)
        //完整路径中不能包含Bucket名称
        //例如exampledir/exampleobject.txt。
        String objectName = "exampledir/exampleobject.txt";
        // 填写网络流地址。
        String url = "https://www.aliyun.com/";

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

        try {
            InputStream inputStream = new URL(url).openStream();
            // 创建PutObjectRequest对象。
            PutObjectRequest putObjectRequest = new PutObjectRequest(bucketName, objectName, inputStream);
            // 创建PutObject请求。
            PutObjectResult result = ossClient.putObject(putObjectRequest);            
        } 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();
            }
        }
    }
}             

在这里插入图片描述
这里就是我们对应的地域节点和bucket域名,进行对应的更换即可

在这里插入图片描述
改完参数,上传完就可以在这个文件管理的文件列表这看到文件

在这里插入图片描述

甚至可以直接通过url在浏览器上直接访问对应的文件

阿里云oss集成

会用就把阿里云集成到我们的程序中
1.接收用户上传的图片
2.传到oss中
3.获取oss中对应的url
4.返回对应url(前端会访问对应url然后展示在界面)
在这里插入图片描述
在这里插入图片描述
用一个工具类,交给IOC容器
里面定义我们的参数,地域名和bucket还有对应的秘钥ID和密码
里面的upload方法(用UUID)就用来上床对应文件
返回对应文件在oss的url
在这里插入图片描述
写controller就完成了
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

小袁拒绝摆烂

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

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

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

打赏作者

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

抵扣说明:

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

余额充值