26_尚硅谷_智慧校园_业务开发之学生管理头像上传

好，接下来呢，我们完成一下学生的这个添加，在完成添加之前呢，嗯，先要给大家做一个文件的一个上传，文件上传一旦做完毕之后啊，剩下的业务逻辑呢，跟之前的业务逻辑呢，基本上就一样了啊好，那么咱先说一下文件上传，这个文件上传是这么选择的哈，在这一点击一点击啊找文件，我这个桌面上头放了这样一个啊小一点勾BD的文件，然后一打开，打开之后呢，来看一下，诶，此时的就报错了，报了一个什么错呀啊出来一个404，因为咱们这个9001这个项目里面的文件上传功能还没有实现啊，那就没有办法用它来演示啊，没有办法用它来演示，没有关系啊，咱用这个我已经写好的这个项目啊。用它来展示学生管理，来学生管理，哎，在这块来添加一个学生，添加的时候呢，还是点击这个头像啊，我先把下面这些请求先给它清掉，要不然以以免一些其他请求造成干扰啊，点击找桌面这个一点扣BG打开，打开之后注意看啊，它立刻呢就向这个header image upload这块呢发送了一个请求，嗯，这个请求消息来我们看一看，嗯，这个请求的数据包里面来看一看哈，它请求的这个路径啊，是一个POS请求啊，Post方式请求路径是SMS system下面有个叫做header image upload是往这呢发送了一个请求，这个请求中发的数据是啥呢？来请求看一看，他这个数据怎么长这个样子，对吧？啊，这个请求中的数据是谁呢？就是上面这个文件啊，这个文件呢，搞成这个样子发到后面去了，所以这是一个乱码，没关系啊。

然后除了这个图片以外呢，似乎有些信息我们能看到啊，这个是呃，Multi part file，这是一个name，然后file是一名file name叫做1.copyg是吧？哎，然后文件类型是content type为这个imggpg，然后看看后面响应给来给我们回来是个什么东西，给我们响应回来是这么一个玩意，给我们响回来一个路径，哎，这是一个什么情况呢？这是一个什么思路呢？是吧？哎，接下来跟大家说一下啊，这个图片它是怎么传的，画个图来解释一下。首先在浏览器上，嗯，它这块呢，有一个小小位置，是让我们选择图片上传位置的啊，这块是一个小图片图片啊，那这个图片呢，当我们一点击这里面有个加号，一点击一个加号，这个加号选定好图片之后，它就会立刻呢把这个图片啊向后台发送，这是一个异步的文件上传是吧？啊这个文件呢，就传送给我们的服务器了，在后端服务器这块，这是后端。

后端来后端，哎后端接入到这个图片之后呢，就把这个图片进行保存，哎图片哎进行了这个保存，保存完之后啊，保存完之后后端响应回来一个什么信息呢？通过result对象响应回来了一个图片的路径，哎就是你这个图片在后端保存到什么位置了呀，对吧？哎假设后端有一个位置啊是一个什么什么东西，一般呢，这个目前现在处理的这个方式是放到了阿lo的目录下，Uplod阿O的目录下，然后呢，起了这样的一个什么一点啊勾PG这个文件名，但是前面带上了一串乱码，像什么这个A什么什么东西，乱七八的一堆东西吧，带上这样一个比较长的一个哎一个字串，哎好，它在后面呢，存储到这个位置之后，他接下来干了什么事呢？

他接下来把这个图片的这个路径啊，把这个图片的路径，嗯，封装给啊对象。这块是一个图片路径，这个图片路径是谁？图片路径是他吗？哎，怎么样就把这个图片的路径来给它CTRLCV啊。放到了re到对象身上啊，传递给了浏览器，浏览器拿到这个路径之后呢，干嘛呢，就把这个路径赋值给了这个图片的src属性，这个src属性等于谁呀？就等于这个图片的路径，当这个src属性等于这个图片路径之后呢？那么浏览器啊，会自动的根据这个路径去到服务器上去找这个图片去啊找到图片之后呢，图片就正常的显示在页面上了，这是一个图片的一个上传，呃，什么时候会正式把这个图片的信息保存进数库数据库呢？当呃，咱们把这个学生的信息全部都放好了，这来一个什么这块来一个叫做提交的时候，提交的时候，那整个的这个form表单它会再次的进行提交。

再进行提交，提交给谁呢？提交给呃，后台的另一个CTRL来了，嗯，后端的什么呢？后端的这个就是保存学生信息，嗯，保存学生信息啊。保存学生信息，保存学生信息的时候呢，他把这个图片的路径，图片的路径以字符串的形式AA就保存到咱们这个数据库里面了，所以数据库里面存的是啥呢？是这个图片的路径，真实的图片呢，是放到咱们这个upload的目录里面，有一呃放到public upload的upload的目录里面啊，进行存储的啊，所以这是它的整体的一个业务逻辑，呃，那基于这样一个业务逻辑，那好，咱们先把这个后端啊，图片请求的这个映射的这个功能先给它实现。打开浏览器，嗯，这个请做URL打开看这啊，是这么一个东西，SMS system header image upload，来CTRLC复制一下，打开咱们自己的项目。

大下咱们自己项目这个是SMS system，那咱们就要到这个里面去写了，为什么放，为什么放到这呢？因为这个图片上传这个功能啊，不仅仅是在学生管理这块，需要那老师管理，教师管理啊，哎，还有后面的这个管理员管理啊，还有修改个人信息这块呢，都需要，所以呢，这块做了一个统一的图片上传的一个路径啊，哎，Public res result，起个名找他吧，哎，Hader对应的路径是他啊。POS请求对应的路径是它，嗯，这入它啊，那起个名也叫hi image upload吧，来看TRC，这倒也无所谓，好传进来之后关键是这个里面这个参数啊，这个参数咱们该怎么接收呢？这个参数要是想接收图片，哎，在这块需要用到这样一个对象，叫做multi part file，哎，它就代表这个图片了。哎，把这个图片呢，还有图片的一些相关信息全抽象成一个multi part file对象，用来进行接收，但是呢，这个图片凭什么就给你这个对象呢？对不对？凭什么能把这图片转换成这个对象呢？需要加上一个注解才能够实现，哎，Request什么呢？Request part。

诶，加这个request part之后，它才会把，哎整个请求之中它这个文件，诶给你抽象到我们这个mount part file上之上啊，那这块呢，需要指定一个名字，主要指定哪个名字呢？来看这，看这个请求之中，请求之中它有这么一个东西啊，叫做name为multi part file，哎你看它提交的名字叫做name，那等于multi part file，所以呢，来看这，你要把这个multi part file这个name也放这，这就代表着multi part file这个文件是赋值，哎给这个对象的是要转换成这个对象的，哎，它要跟前面这个名字保持一致啊。好，那这块写完之后呢，参数列表进行准备好了，准备了，准备好之后加数解艾，这是一个post请求来一个post mapping。呃，形示的URL，哎，斜线header image upload来是它就可以了，再加上一个swagger的at API option，这是文件上传，文件上传统一诶入口，哎统一入口好搞定了哈，这参数表就搞定了，这块呢，再来一个，来一个艾特a PA API API perel，这是一个参数啊，API perel，这是呃，这是呢，这是。

嗯，文件这是要上传的，文件要上传的，这就是文件完事了，头像文件吧，啊头像文件在这里面要干的事情就是来保存文件，保存文件，然后之后呢，文件保存好了，响应什么呢？响应一个图片的这个路径，哎，响应图片路径，这个图片路径啊，前端拿到之后呢，就可以直接直接使用了啊，那真的能够直接使用吗？来看一看它想要了这样一个图片路径，来把它CTRLC复制一下，复制完之后这个智能直接访问的到吗？是可以的，在这块咱们再来加一个来，呃，Local host9002啊。

9002，这是我写好的项目，这里面放了一个up a，嗯，怎么变成他了？嗯，把这个URL给它复制过来啊。完了再把它给它复制过来换下。CTRLC复制一下。嗯，是他呀。9002啊，9002来穿过来，哎，这来来走，你看这不直接就打开这个图片了嘛，对不对，哎，所以这个是可以公开的，可以访问的一个位置是吧？哎，那好，那咱们一会呢，也要给前端响应这样一个，给浏览器应这样一个图片啊，这样路径就OK了，就放到主对象里边去，那我可以先return一个。Ta一个什么，Ta一个result result a.OK然后里面放这个图片路径，这图片路径咱知不知道不知道，先空着啊，保存图片，保存文件之后呢，保存文件之前咱还要做这样一件事，为啥做一件什么事呢？就是文件的名字要改一改，为什么改一改呢？呃，如果说很多人在上传文件的时候都使用同一个文件名，那这个文件名啊，如果在存储成么都往这一个地方存呢，文件名可能会冲突，那一冲突的话，可能会有一些问题是吧？所以呢，每个文件都要有自己独立的名字，那怎么才能生成文件独立的名字呢？咱们在这用一个UUID的一个技术，UUID点呃，Random u u id.twoth string转成个，转成一个twoth three，它就给我们生成一个UUI一个字符串，这个字符串里面呢，可能会有一些中横线这样的一些符号，这个中和线符号你要是不想喜欢或者影响咱们前面的这个路径的话呢，可以给它替换掉，再来一个replace，把这个里面的中和线全部都替换成一个空字符串。

诶，然后呢，再把它全都转换成小写，To lower case。那图入case就可以了啊，这样的话就获得了一个唯一的一个UUIDUID啊这个UID呢，就是一个新的这样的一个名字，那我们可以把原来的这个文件，原来这个文件叫什么？原来这个文件叫做一点勾PG，勾PG把原来这个文件名给它换了，哎，别叫一点勾P，我只取一个后缀，然后前缀的变成咱们这个UUID，那这个怎么办呢？可以这么写哈，那原来这个文件名字呢，怎么获取呢？Multi part file.get嗯，Get get original file name，这个original file name是谁呢？你上传这个文件，这个文件名不叫1.bg吗？这个original original file name就是它，哎，那在这怎么处理呢？Original name点这个叫做。

哎，Substre从哪开始截取呢？从这个，哎，我先把这个original final name先拿出来吧，这是一个original file name原始的文件名，原始的文件名里面截取啊来在先这里面找，找什么，找这个啊，In啊，Last index of，找这个最后一个点它出现的位置，它的一个索引啊，这个索引拿到之后呢，咱们就从这个索引之后开始往后截取，从这个original file name里面来一个sub string，从这个I开始截取到最后，那就会截取的一个出来，一个点勾PG，这个点勾BG达到之后呢，在前面，呃，在它的前面再加上什么呢？再加上一个UUID，哎，加上它，这就是一个新的，哎文件名字string new and file name new file name啊，哎，那这个文件名呢，就拿到了啊，这一个新的文件名咱就处理好了，一会保存的时候呢，诶就用这个新的文件名，诶就OK了。

新的文件没有了，接下来就要保存文件，文件往里存呢，它真实存储的位置是他给的classes come public upload往这里面存，呃，如果要是想存这个文件原始的，或者是找这个路径啊，第一种方式是怎么找呢？在这块来一个嗯，在这块来一个逗号，然后来一个HTTP。Http so request对象，哎，用这个request对象啊，然后用这个request对象这么写啊request对象嗯先获得so content对项，再get get这个real pass，然后里面这么写，写成像什么upload呀，哎什么哎public斜线啊upload呀，哎，然后斜线呢往这边去算，但是呢，咱们现在这个4SUPREME boot项目啊，它的启动方式呢，是用内置逃不开的，如果是用内置逃不开的，那这个路径所获取的这个真实路径呢，它就跟这个就对不准，就不是这个target class com.public的这个真实的一个路径，正好是别的一个地方啊，所以这是他现在一个毛病，那那现在怎么办呢？这个保存文件啊，在实际开发中应该这么做，应该是干嘛呢？将这个文件，将文件呃发送到什么呀，发送到第三方，第三方或者是或者是一个或者这个独立的，哎，图片服务器上去图片服务器上。

嗯，服务器上按，然后呢，嗯，后面呢，会把这个独立的图片服务器上面所存储图片的URL拿到，拿到之后呢，响应过去，但是咱现在呢，没有第三方的图独立的图片服务器，那怎么办呢？我们可以这么来做，就是手动找一下这个真实的这个uplo的目录在哪里，然后呢，先给他写死了啊先给他写死了，直接写成这个，呃，因为这个呢，目前也是做这个，呃主要是为了完成，嗯，完成这个大家的这个毕业设计嘛，对不对，所以呢，就没有必要那么麻烦，就把这个up罗的目录，它所真实存在这个位置找到，然后呢，呃，给它搞一个就可以了，先来一个什么，先来一个string的一个什么string叫做p potit。

嗯，Portrait这样的一个pass，这是一个图片的一个真实要存的位置啊，这些图片的位置在哪呢？等于等于一个双引号，后面要写这个一直到upload的这个目录啊，我这个upload目录在这呢。C盘扣的麦智慧校园是吧，先来。嗯，这个窗口加加E在这打开一下，呃，C盘冒号斜线，嗯，COD code的斜线，MY智慧，嗯，校园啊校园啊先进到这来，在这个智慧校园里面呢，有一个，嗯，来看一看啊，有一个target，诶应该是它啊。那应该是这个。嗯，Target target里面找谁呢？找这classes啊，Come at硅谷卖智慧校园，诶，诶嘿，找找错位置了啊。

嗯，卖智慧校园有没在这儿啊。哎，他这个位置在哪块。嗯，直接classes下面就有啊，应该找错位置了，Classes classes，嗯，Classes下面这呢啊，这在这个public在这呢啊lo啊就它你看图片也在这呢是吧？来把这个路径来给它C复制一下，复制完之后来关到它放到这，这就是图片真实存在的位置哈，在这个给转移了，看着难受，写成这样一下啊，这个当然不改也行啊，哎，怎么写成两个了是吧，这就不能写成两个了。好，这是一种临时解决方案，将来呢，咱们有第三方的这个图片图片服务器之后呢，直接往第三方图片服务器里面推就OK了，在下边存一个什么呢？存的这个文件名啊的文件名后面加上一个什么，加上一个新的文件名就OK了，New file name，当然呢，这个加号呢，感觉有点low low的话可以这么写，来个点contact contact下这个new啊反有内容，但是就加一次，所以这个用加号还是contact也无所谓，那如果说这块用加号比较low的话，那其实这块用加号，哎，那去了这块用加号也比较low，那那也可以contact开一下嘛，是吧，对，用contact来给它将API来拼接一下，这也可以啊，然后之后呢，这就是图片的，嗯，图片的这个文件名啊有了，然后图片真实存在这个位置呢，也有了。

有了之后得把图片存过去啊，那怎么存怎么存呢？这块直接用这个multi part file这个对象，它有一个叫做transfer to的一个方法，哎，Ts transfer to的一个方法，然后你在这块你有一个对象，这个file对象，让它指向上面这个哎真实的存储位置就可以了，叫做po，哎这放这就可以了啊这个transfer to啊这个方法就会将当前这图片，当前这个文件给它传送到哎这个位置就OK了，Transfer to方法有异常啊来在这块more action surround with try catch1下来个try catch给它包一下try catch结束之后呢，咱们要往这想一个图片的路径，那图片的真实路径该怎么写呢？一个string啊path等于第一个是呢，这个这这个图片路径前面都有个什么，前面都有个upload upload里面的，里面的文件名叫啥呢？这文件名不就是这个新的文件名吗？把它给它拼到后面就OK了啊。

来点contact.contact这个新的文件名，这就是图片真实存在的一个路径啊，这是存在路径，然后再把这个真实存在路径这个pass，哎，这个pass再给它放回去，哎，放到这个result对象上，放到它的data属性上，给它进行个响应就OK了，那这个全局文件上传这个位置就已经搞定了啊。好，那接下来重新启动咱们这个项目，看一看图片上传这个功能有没有完成，能不能进行实现啊。启动了，启动之后呢，找到咱们这个9001这个项目啊，来在这说重重新进入呃，学生管理添加学生找一个文件的图片，就桌面这个吧，来一点打开，诶你看图片上传成功了，上传成功了，他就给我们成功的保存到了后台，它对应的是这个玩意啊。

这个这是又发送了一次请求，这是咱们后台存储那个图片的位置啊，这是提交图片，那这张这是提交图片，这个图片上传这个功能，哎，就搞定了。啊。