SAP fiori文件上传

前端

• 编写Upload.view.xml

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

• 编写Upload.controller.js

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")
			//获取dom节点
			var domRef = fp.getFocusDomRef();
			//获取file对象
			var file = domRef.files[0];
			//定义读取文件对象
			var reader = new FileReader();
			//处理作用域
			var that = this;
			//将文件读取为一段以 data: 开头的字符串
			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");
				}
			});
		}
	});
});

后端

• 在pom.xml中导入依赖

<!-- servlet依赖包 -->
<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>

• 编写上传的Servlet，处理ajax请求

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 {
    	//获取ajax请求中的文件内容
        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 按钮，上传文件
  
• 查看桌面