Web-文件上传

需求

新增员工和修改员工的需求会需要上传对应的图像
先实现对应的新增需求吧
Web-文件上传_第1张图片
Web-文件上传_第2张图片
!!!@RequestBody,因为传参是json格式,还是看对应接口文档!!!

controller
Web-文件上传_第3张图片
service
Web-文件上传_第4张图片

mapper
Web-文件上传_第5张图片
xml
Web-文件上传_第6张图片
对应代码


    <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>

文件上传

Web-文件上传_第7张图片

简介

Web-文件上传_第8张图片
文件上传分两个程序
一个前端程序,一个服务端程序

前端

Web-文件上传_第9张图片

Web-文件上传_第10张图片

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

这里的请求方式是默认的
Web-文件上传_第11张图片
可以看到值传输了对应图片名字

Web-文件上传_第12张图片

服务端

Web-文件上传_第13张图片
Web-文件上传_第14张图片

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

Web-文件上传_第17张图片

Web-文件上传_第18张图片

小结

Web-文件上传_第19张图片

本地存储

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

那么怎么指定文件夹呢?
如图
只需,对应参数.transferTo(new File(路径))即可
但是文件名不能瞎命名,可以和它原始文件名一样,用image对象获取原始文件名即可
Web-文件上传_第20张图片

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

怎么解决呢?

UUID

Web-文件上传_第22张图片
对应输出的UUID
Web-文件上传_第23张图片

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

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

Web-文件上传_第24张图片

文件大小

我们传参可以发生错误
可能因为我们的文件太大了,springboot默认最大文件是1MB
我们需要进行配置了解除这个限制
Web-文件上传_第25张图片
如图
Web-文件上传_第26张图片

本地存储缺点

一般现在都是云存储了
这里主要是熟悉对应MultipartFile的方法
Web-文件上传_第27张图片

云存储(阿里云oss)

Web-文件上传_第28张图片
就是我们直接使用阿里给我们开发好的服务,就不需要自己开发
比如我们要实现短信发送,我们就可以直接用阿里云的短信服务
Web-文件上传_第29张图片
就是把对应的东西放到云存储器上
我们学习的是怎样去运用
Web-文件上传_第30张图片

根据对应完成注册,不用重置,直接开通oss服务
到这个界面
Web-文件上传_第31张图片
然后创建bucket即可

Web-文件上传_第32张图片
Web-文件上传_第33张图片
只写上面对应三个,下面那些都不用动
从头像处,获取对应秘钥Accesskey
Web-文件上传_第34张图片
这个界面,新建一个AccessKey
对应包含ID和Secret
对应后面有查看secret,获取就行
Web-文件上传_第35张图片

阿里云oss快速入门

操作的话找对应的说明文档
eclipse和IDEA没有maven项目正常是要导包
有maven导入对依赖即可,注意java9之后需要导入jaxb依赖
Web-文件上传_第36张图片

找到文件上传的操作代码
找到我们想要的上传文件大妈
cv一下
Web-文件上传_第37张图片
这里代码
代码和图里不一样,把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();
            }
        }
    }
}             

Web-文件上传_第38张图片
这里就是我们对应的地域节点和bucket域名,进行对应的更换即可

Web-文件上传_第39张图片
改完参数,上传完就可以在这个文件管理的文件列表这看到文件
Web-文件上传_第40张图片
Web-文件上传_第41张图片

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

阿里云oss集成

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

你可能感兴趣的:(JavaWeb,前端,java)