前端js以application/octet-stream方式上传文件

今天又学会了一种上传文件的文件流方法。
本人后端采用了CXF框架实现的

api层

package com.inspur.gs.tax.tbs.utils;

import org.glassfish.jersey.media.multipart.FormDataParam;
import javax.activation.DataHandler;
import javax.jws.WebParam;
import javax.ws.rs.*;
import javax.ws.rs.core.MediaType;
import javax.xml.bind.annotation.XmlMimeType;
import java.awt.*;
import java.io.InputStream;
/**
 * @author Guangpei Xia
 * @create 2021-08-29-10:51
 */
@Consumes(MediaType.APPLICATION_OCTET_STREAM)
@Produces(MediaType.APPLICATION_JSON)
public interface ITaxImport {
    @Path("/importexcel")
    @POST
    String importexcel(@XmlMimeType("application/octet-stream") DataHandler dataHandler, @QueryParam("endpoint")String endpoint, @QueryParam("method")String method);
}

前端js

function confirmUpload() {
	var theFile = $("#uploadFile");
	var file = theFile[0].files[0];
	var reader = new FileReader();
	reader.readAsArrayBuffer(file);//这个读法是异步的
	reader.onloadend = function(){
		// 这个事件在读取结束后,无论成功或者失败都会触发
		if (reader.error) {
			idp.error("文件读取失败");
		} else {
			upload(url,reader.result,sucess,error);
		}
	}
}
// 文件上传
		function upload(url,binary,successCallback, errorCallback){
			var xhr = new XMLHttpRequest();
			xhr.open("POST", url);
			xhr.overrideMimeType("application/octet-stream");
			//直接发送二进制数据
			if(xhr.sendAsBinary){
				xhr.sendAsBinary(binary);
			}else{
				xhr.send(binary);
			}
			// 监听变化
			xhr.onreadystatechange = function(event){
				if(xhr.readyState===4){
					if(xhr.status===200){
						var jqXHR = event.target;
						// 响应成功
						if (successCallback) {
							successCallback(jqXHR.responseText);
						}	
					}else{
						if (errorCallback) {
							errorCallback(jqXHR.responseText);
						}	
					}
				}
			}
		}
	}
function sucess(data) {
		// 成功之后执行的方法
        var res = JSON.parse(data);
  }
 function error(data) {
 //异常执行的方法
     var res = JSON.parse(data);
     onError && onError(res);

 }

附上以form方式上传文件的方式

// Form请求上传文件
		function importFileWithAjax(serverUrl, formData, successCallback, errorCallback) {
			$.ajax({
				url: serverUrl, //Server script to process data
				type: 'POST',
				success: function completeHandler(data, textStatus, jqXHR) {
					if (successCallback) {
						successCallback(jqXHR.responseText);
					}
				},
				error: function errorHandler(jqXHR, textStatus, errorThrown) {
					if (errorCallback) {
						errorCallback(errorThrown);
					}
				},
				data: formData, // Form data
				cache: false, 
				contentType: false,
				processData: false,
				headers: { //Options to tell server return data with specified type
					"Accept": "application/json"
				}
			});
		}

前端处理参考了此博客:https://www.cnblogs.com/hhhyaaon/p/5929492.html

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