前端进行文件上传的各种方法总结（代码）

 <form action="http://localhost:8081/thingsparse/addorupdthingsparse" method="post" enctype="multipart/form-data">
 <input type="file" name="file" value="选择上传文件..."/>
 <input id="submit_form" type="submit" class="btn btn-success save" value="保存"/>
 </form>

 (function(){
 $('#upload').change(function(e){
 let files = e.target.files;
 let params = new FormData();
 for(let i = 0; i < files.length; i++){
 //visit_file就是后台用来接受的字段，因为是一个数组，所以加一个[]
 params.append('visit_file[]', files[i], files[i].name);
 }
 
 $.ajax({
 type: 'post',
 url: "http://192.168.1.101:8080/springbootdemo/file/upload",
 data: params,
 processData: false,//必不可少属性
 traditional: true,//必不可少属性
 contentType: false,//必不可少的属性
 }).success(function (data) {
 console.log(data);
 }).error(function () {
 console.log("上传失败");
 })
 })()

 (function(){
 $('#upload').change(function(e){
 let files = e.target.files;
 let params = new FormData();
 for(let i = 0; i < files.length; i++){
 //visit_file就是后台用来接受的字段，因为是一个数组，所以加一个[]
 params.append('visit_file[]', files[i], files[i].name);
 }
 //图片预览地址数组
 let previewArr = previewImage(files); 
 
 for(let i = 0 ; i < previewArr.length; i++){
 
 } 
 }
 
 //上传图片 压缩过的二进制文件只能单张上传处理，我试过多上同时上传失败了，你们也可以试试，也许可以找到方法
 function uploadImage(params){
 $.ajax({
 type: 'post',
 url: "http://192.168.1.101:8080/springbootdemo/file/upload",
 data: params,
 processData: false,//必不可少属性
 traditional: true,//必不可少属性
 contentType: false,//必不可少的属性
 }).success(function (data) {
 console.log(data);
 }).error(function () {
 console.log("上传失败");
 })
 }
 //图片预览
 function previewImage(files){
 let previewsArr = [];
 for(let i = 0; i < files.length; i++){
 let fileReader = new FileReader();
 fileReader.readAsDataURL(files[i]);
 fileReader.onloaded = () => {
 //数组放入获取的base64本地图片地址
 previewsArr.push(fileReader.result);
 }
 }
 
 return previewsArr;
 
 }
 //图片压缩 
 function compressImage(base64URL){
 let img = new Image();
 let canvas = document.createElement('canvas');
 let context = canvas.getContext('2d');
 img.src = base64URL;
 
 img.onload = () => {
 // 图片原始尺寸
 var originWidth = img.width;
 var originHeight = img.height;
 // 最大尺寸限制
 let maxWidth = 400,
 maxHeight = 400;
 // 目标尺寸
 let targetWidth = originWidth,
 targetHeight = originHeight;
 // 图片尺寸超过400x400的限制
 if (originWidth > maxWidth || originHeight > maxHeight) {
 if (originWidth/originHeight > maxWidth/maxHeight) {
 //更宽，按照宽度限定尺寸
 targetWidth = maxWidth;
 targetHeight = Math.round(maxWidth * (originHeight / originWidth));
 }else{
 targetHeight = maxHeight;
 targetWidth = Math.round(maxHeight * (originWidth / originHeight));
 }
 }
 
 
 // canvas对图片进行缩放
 canvas.width = targetWidth;
 canvas.height = targetHeight;
 // 清除画布
 context.clearRect(0, 0, targetWidth, targetHeight);
 // 图片压缩
 context.drawImage(img, 0, 0, targetWidth, targetHeight);
 
 
 //canvas直接转blob二进制文件，但是大部分浏览器不支持
 // canvas.toBlob(function (blob) {
 // console.log(blob)
 // resolve(blob)
 // }, 'image/png');
 
 let base64Data = canvas.toDataURL("image/png", 0.92);
 
 let blob = dataURItoBlob(base64Data);
 //上传图片
 
 let params = new FormaData();
 params.append('visit_file', blob, 'cavas.png');
 
 uploadImage(params);
 
 }
 }
 
 /**
 * base64 转二进制文件
 * @param {*} base64Data 
 */
 function dataURItoBlob(base64Data) {
 var bytes = window.atob(base64Data.split(',')[1]); //去掉url的头，并转换为byte
 
 //处理异常,将ascii码小于0的转换为大于0
 var ab = new ArrayBuffer(bytes.length);
 var ia = new Uint8Array(ab);
 for (var i = 0; i < bytes.length; i++) {
 ia[i] = bytes.charCodeAt(i);
 }
 
 return new Blob([ab], {
 type: 'image/png'
 });
 }
 
 })()

 /**
 * 
 * @param {路由} url 
 * @param {路由参数} params 
 * @param {文件数据} body 
 */
 upload(url, params = '', body = {}) {
 let path = config.host + url + params;
 // console.log(body);
 return axios({
 method: "POST",
 url: path,
 data: body,
 processData: false, //必不可少参数
 traditional: true, //比不可少参数
 contentType: false,//比不可少参数
 headers: {
 'token': localStorage['token'],
 'originno': config.originno,
 "Content-Type": false
 }
 }).then(
 res => res
 ).catch((error) => {
 console.log(error);
 })
 }