前端
< mvc: View
controllerName = " sap.ui.taking.controller.Upload"
xmlns: l= " sap.ui.layout"
xmlns: u= " sap.ui.unified"
xmlns: mvc= " sap.ui.core.mvc"
xmlns = " sap.m" >
< l: VerticalLayout>
< u: FileUploader
id = " fileUploader"
name = " myFileUpload"
icon = " sap-icon://doc-attachment"
iconOnly = " true"
tooltip = " Upload your file to the local server"
multiple = " true"
placeholder = " 请上传附件"
style = " Transparent "
sameFilenameAllowed = " true" >
</ u: FileUploader>
< Button
text = " Upload File"
press = " handleUploadPress" />
</ l: VerticalLayout>
</ mvc: View>
sap. ui. define ( [
'sap/ui/core/mvc/Controller'
] , function ( Controller ) {
"use strict" ;
return Controller. extend ( "sap.ui.taking.controller.Upload" , {
onInit : function ( ) {
} ,
handleUploadPress : function ( event ) {
var oView = this . getView ( ) ;
var fp = oView. byId ( "fileUploader" )
var domRef = fp. getFocusDomRef ( ) ;
var file = domRef. files[ 0 ] ;
var reader = new FileReader ( ) ;
var that = this ;
reader. readAsDataURL ( file) ;
reader. onload = function ( e ) {
var content = e. currentTarget. result. replace ( "data:" + file. type + ";base64," , "" ) ;
that. sendFile ( content) ;
}
} ,
sendFile : function ( content ) {
$. ajax ( {
async: true ,
type: "POST" ,
url: "http://localhost:8080/UploadServlet" ,
data: {
file: content
} ,
contentType: "application/x-www-form-urlencoded" ,
success : function ( data ) {
console. log ( data) ;
console. log ( "File uploaded successfully" ) ;
} ,
error : function ( e ) {
console. log ( e) ;
console. log ( "Error while uploading the file" ) ;
}
} ) ;
}
} ) ;
} ) ;
后端
< dependency>
< groupId> javax.servlet</ groupId>
< artifactId> javax.servlet-api</ artifactId>
< version> 3.1.0</ version>
</ dependency>
< dependency>
< groupId> org.springframework</ groupId>
< artifactId> spring-web</ artifactId>
< version> 5.3.7</ version>
</ dependency>
package com. taking. servlet ;
import org. springframework. web. bind. annotation. CrossOrigin ;
import javax. servlet. ServletException ;
import javax. servlet. annotation. WebServlet ;
import javax. servlet. http. HttpServlet ;
import javax. servlet. http. HttpServletRequest ;
import javax. servlet. http. HttpServletResponse ;
import java. io. FileOutputStream ;
import java. io. IOException ;
import java. io. OutputStream ;
import java. util. Base64 ;
@CrossOrigin ( "http://localhost:5500" )
public class UploadServlet extends HttpServlet {
protected void doPost ( HttpServletRequest request, HttpServletResponse response) throws ServletException , IOException {
doGet ( request, response) ;
}
protected void doGet ( HttpServletRequest request, HttpServletResponse response) throws ServletException , IOException {
String file = request. getParameter ( "file" ) ;
Base64. Decoder decoder = Base64 . getMimeDecoder ( ) ;
byte [ ] b = decoder. decode ( file) ;
OutputStream os = new FileOutputStream ( "/Users/taking/Desktop/taking.txt" ) ;
os. write ( b) ;
os. close ( ) ;
}
}
效果
页面如图所示 点击icon,选择需要上传的文件 点击 Upload File 按钮,上传文件 查看桌面