圖片框架圖片上傳
Ⅰ 我用tp框架上傳圖片之後圖片不能直接顯示，非得手動刷新一下頁面才能顯示，這是什麼原因
當然要刷新頁面才能顯示啊，除非你用ajax 要不然你就上傳完寫個跳轉回這個頁面 讓他自動刷新一下就好了。
Ⅱ vue點擊上傳圖片，vue上傳oss，vue-cropper圖片裁剪功能
很多剛入門的小夥伴上傳圖片都會使用現成的框架，然後根據框架提供的api進行上傳，感覺這樣是最簡單的，其實上傳圖片是一個很簡單的功能，
1.將input的設為透明然後定位到按鈕上面，通過點擊實現上傳
2.點擊按鈕，通過處發input的點擊事件後處發change，達到喚起上傳圖片的效果
先通過npm安裝oss依賴
oss官方文檔
1.前端拿到 accessKeyId，accessKeySecret直接上傳oss
這種用法會直接暴露id及secret，相當於把自己家門的鑰匙告訴別人，不推薦使用
2.通過後台轉換，拿到對應的參數，進行上傳
圖片裁剪的插件，先通過npm安裝依賴
vue-cropper 高版本解決在ios上圖片拍照旋轉問題
父組件
子組件，在項目components文件中新建一個cropper文件，在父組件中引入
Ⅲ SSM框架怎麼實現圖片批量上傳
Chrome瀏覽器用小樂圖客，可以批量上傳圖片。 至於上傳前壓縮，如果是指減小圖片尺寸，可以使用小樂圖客的美圖功能（縮放） 如果是指減小體積（size），那就可以使用小樂圖客存圖功能（需先下調jpeg品質，建議設置為95，圖片質量損失不大）
Ⅳ 如何在spring mvc中上傳圖片並顯示出來
（1）在spring mvc的配置文件中配置：
<beanid="multipartResolver"class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<propertyname="uploadTempDir"value="/tmp"/><!--臨時目錄-->
<propertyname="maxUploadSize"value="10485760"/><!--10M-->
</bean>
（2）文件上傳表單和結果展示頁fileupload.jsp：
<%@pagelanguage="java"contentType="text/html;charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglibprefix="mvc"uri="http://www.springframework.org/tags/form"%>
<%@taglibprefix="c"uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<title>SpringMVC文件上傳</title>
</head>
<body>
<h2>圖片文件上傳</h2>
<mvc:formmodelAttribute="user"action="upload.html"
enctype="multipart/form-data">
<table>
<tr>
<td>用戶名：</td>
<td><mvc:inputpath="userName"/></td>
</tr>
<tr>
<td>選擇頭像：</td>
<td><inputtype="file"name="file"/></td>
</tr>
<tr>
<tdcolspan="2"><inputtype="submit"value="Submit"/></td>
</tr>
</table>
</mvc:form>
<br><br>
<c:iftest="${u!=null}">
<h2>上傳結果</h2>
<table>
<c:iftest="${u.userName!=null}">
<tr>
<td>用戶名：</td>
<td>${u.userName}</td>
</tr>
</c:if>
<c:iftest="${u.logoSrc!=null}">
<tr>
<td>頭像：</td>
<td><imgsrc="${u.logoSrc}"width="100px"height="100px"></td>
</tr>
</c:if>
</table>
</c:if>
</body>
</html>
（3）後台處理UploadController.java：
packagecn.zifangsky.controller;
importjava.io.File;
importjava.io.IOException;
importjavax.servlet.http.HttpServletRequest;
importorg.apache.commons.io.FileUtils;
importorg.springframework.stereotype.Controller;
importorg.springframework.web.bind.annotation.RequestMapping;
importorg.springframework.web.bind.annotation.RequestMethod;
importorg.springframework.web.bind.annotation.RequestParam;
importorg.springframework.web.multipart.MultipartFile;
importorg.springframework.web.servlet.ModelAndView;
importcn.zifangsky.model.User;
importcn.zifangsky.utils.StringUtile;
@Controller
publicclassUploadController{
@RequestMapping(value="/form")
publicModelAndViewform(){
ModelAndViewmodelAndView=newModelAndView("fileupload","user",newUser());
returnmodelAndView;
}
@RequestMapping(value="/upload",method=RequestMethod.POST)
publicModelAndViewupload(Useruser,@RequestParam("file")MultipartFiletmpFile,HttpServletRequestrequest){
ModelAndViewmodelAndView=newModelAndView("fileupload");
if(tmpFile!=null){
//獲取物理路徑
StringtargetDirectory=request.getSession().getServletContext().getRealPath("/uploads");
StringtmpFileName=tmpFile.getOriginalFilename();//上傳的文件名
intdot=tmpFileName.lastIndexOf('.');
Stringext="";//文件後綴名
if((dot>-1)&&(dot<(tmpFileName.length()-1))){
ext=tmpFileName.substring(dot+1);
}
//其他文件格式不處理
if("png".equalsIgnoreCase(ext)||"jpg".equalsIgnoreCase(ext)||"gif".equalsIgnoreCase(ext)){
//重命名上傳的文件名
StringtargetFileName=StringUtile.renameFileName(tmpFileName);
//保存的新文件
Filetarget=newFile(targetDirectory,targetFileName);
try{
//保存文件
FileUtils.InputStreamToFile(tmpFile.getInputStream(),target);
}catch(IOExceptione){
e.printStackTrace();
}
Useru=newUser();
u.setUserName(user.getUserName());
u.setLogoSrc(request.getContextPath()+"/uploads/"+targetFileName);
modelAndView.addObject("u",u);
}
returnmodelAndView;
}
returnmodelAndView;
}
}
在上面的upload方法中，為了接收上傳的文件，因此使用了一個MultipartFile類型的變數來接收上傳的臨時文件，同時為了給文件進行重命名，我調用了一個renameFileName方法，這個方法的具體內容如下：
/**
*文件重命名
*/
(StringfileName){
StringformatDate=newSimpleDateFormat("yyMMddHHmmss").format(newDate());//當前時間字元串
intrandom=newRandom().nextInt(10000);
Stringextension=fileName.substring(fileName.lastIndexOf("."));//文件後綴
returnformatDate+random+extension;
}
註：上面用到的model——User.java：
packagecn.zifangsky.model;
publicclassUser{
privateStringuserName;//用戶名
privateStringlogoSrc;//頭像地址
publicStringgetUserName(){
returnuserName;
}
publicvoidsetUserName(StringuserName){
this.userName=userName;
}
publicStringgetLogoSrc(){
returnlogoSrc;
}
publicvoidsetLogoSrc(StringlogoSrc){
this.logoSrc=logoSrc;
}
}
至此全部結束
效果如下：
（PS：純手打，望採納）