摘要:哈哈主要還是我嫌麻煩四上傳圖片這里的頁(yè)面樣式,圖片壓縮和預(yù)覽都和上面一樣,這里我主要配置一下的,讓接口能夠成功上傳。如果想讓用戶(hù)有更好的體驗(yàn),可以對(duì)圖片進(jìn)行一下壓縮和本地預(yù)覽。
一、通過(guò)Form表單提交上傳
HTML enctype屬性必不可少
上面一種方法通過(guò)表單自有屬性進(jìn)行提交,看似簡(jiǎn)單,但是也有其最大的缺點(diǎn),那就是提交完畢之后直接進(jìn)行了跳轉(zhuǎn),這對(duì)于當(dāng)前的絕大多數(shù)的需求來(lái)說(shuō)是不能滿(mǎn)足的。那么我接下來(lái)介紹另一種直接利用xaj的post方法和FormData進(jìn)行文件的上傳。
HTML 多文件上傳JS
(function(){ $("#upload").change(function(e){ let files = e.target.files; let params = new FormData(); for(let i = 0; i < files.length; i++){ //visit_file就是后臺(tái)用來(lái)接受的字段,因?yàn)槭且粋€(gè)數(shù)組,所以加一個(gè)[] 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("上傳失敗"); }) })()
這種方法解決了上傳文件之后頁(yè)面跳轉(zhuǎn)的問(wèn)題,但是如果你傳的圖片很大的時(shí)候怎么辦?接下來(lái)就是我們要說(shuō)的上傳較大文件時(shí)一個(gè)優(yōu)化方案。如今,為了提升用戶(hù)的體驗(yàn),不僅讓用戶(hù)再瀏覽時(shí)給用戶(hù)極致的體驗(yàn),還要在上傳時(shí)感受不到卡頓的現(xiàn)象,這對(duì)于后端來(lái)說(shuō)就做不了了,只能交給前端。下面我們介紹一下這種優(yōu)化方案。
HTML 多文件上傳JS
(function(){ $("#upload").change(function(e){ let files = e.target.files; let params = new FormData(); for(let i = 0; i < files.length; i++){ //visit_file就是后臺(tái)用來(lái)接受的字段,因?yàn)槭且粋€(gè)數(shù)組,所以加一個(gè)[] params.append("visit_file[]", files[i], files[i].name); } //圖片預(yù)覽地址數(shù)組 let previewArr = previewImage(files); for(let i = 0 ; i < previewArr.length; i++){ } } //上傳圖片 壓縮過(guò)的二進(jìn)制文件只能單張上傳處理,我試過(guò)多上同時(shí)上傳失敗了,你們也可以試試,也許可以找到方法 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("上傳失敗"); }) } //圖片預(yù)覽 function previewImage(files){ let previewsArr = []; for(let i = 0; i < files.length; i++){ let fileReader = new FileReader(); fileReader.readAsDataURL(files[i]); fileReader.onloaded = () => { //數(shù)組放入獲取的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; // 目標(biāo)尺寸 let targetWidth = originWidth, targetHeight = originHeight; // 圖片尺寸超過(guò)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對(duì)圖片進(jìn)行縮放 canvas.width = targetWidth; canvas.height = targetHeight; // 清除畫(huà)布 context.clearRect(0, 0, targetWidth, targetHeight); // 圖片壓縮 context.drawImage(img, 0, 0, targetWidth, targetHeight); //canvas直接轉(zhuǎn)blob二進(jìn)制文件,但是大部分瀏覽器不支持 // 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 轉(zhuǎn)二進(jìn)制文件 * @param {*} base64Data */ function dataURItoBlob(base64Data) { var bytes = window.atob(base64Data.split(",")[1]); //去掉url的頭,并轉(zhuǎn)換為byte //處理異常,將ascii碼小于0的轉(zhuǎn)換為大于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" }); } })()
這里通過(guò)FileReader獲取本地base64文件,然后通過(guò)canvas對(duì)圖片進(jìn)行壓縮,最終轉(zhuǎn)為二進(jìn)制的blob文件,傳到服務(wù)器上。這里還可以做的更好,利用promise,對(duì)壓縮功能進(jìn)行返回,不必在壓縮函內(nèi)進(jìn)行調(diào)用上傳,降低耦合度。這里為了大家理解,我就沒(méi)有分開(kāi)。哈哈~~主要還是我嫌麻煩...
這里的頁(yè)面樣式,圖片壓縮和預(yù)覽都和上面一樣,這里我主要配置一下axois的http,讓post接口能夠成功上傳。
/** * * @param {路由} url * @param {路由參數(shù)} params * @param {文件數(shù)據(jù)} body */ upload(url, params = "", body = {}) { let path = config.host + url + params; // console.log(body); return axios({ method: "POST", url: path, data: body, processData: false, //必不可少參數(shù) traditional: true, //比不可少參數(shù) contentType: false,//比不可少參數(shù) headers: { "token": localStorage["token"], "originno": config.originno, "Content-Type": false } }).then( res => res ).catch((error) => { console.log(error); }) }
我也是最近在做項(xiàng)目時(shí)遇到需求,當(dāng)時(shí)使用的就是vue+axois,怎么提交怎么報(bào)錯(cuò),最后發(fā)現(xiàn)就是文件沒(méi)有傳過(guò)去,只要配置上那三個(gè)必不可少的參數(shù),就可以上傳成功。如果想讓用戶(hù)有更好的體驗(yàn),可以對(duì)圖片進(jìn)行一下壓縮和本地預(yù)覽。還可以做的更好,如果大家有什么問(wèn)題可以留言告訴我!也可以在我的基礎(chǔ)上進(jìn)行更多的擴(kuò)展。
謝謝大家能夠讀完我的這篇文章!
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/52750.html
摘要:哈哈主要還是我嫌麻煩四上傳圖片這里的頁(yè)面樣式,圖片壓縮和預(yù)覽都和上面一樣,這里我主要配置一下的,讓接口能夠成功上傳。如果想讓用戶(hù)有更好的體驗(yàn),可以對(duì)圖片進(jìn)行一下壓縮和本地預(yù)覽。 一、通過(guò)Form表單提交上傳 HTML enctype屬性必不可少 上面一種方法通過(guò)表單自有屬性進(jìn)行提交,看似簡(jiǎn)單,但是也有其最大的缺點(diǎn),那就是提交...
摘要:圖片文件大小減小后,上傳速度自然會(huì)提升,在同樣的并發(fā)下,后臺(tái)處理的速度也會(huì)得到提升,用戶(hù)體驗(yàn)得到提升。 這是一個(gè)很簡(jiǎn)單的方案。嗯,是真的。 為什么要這么做? 在移動(dòng)Web蓬勃發(fā)展的今天,有太多太多的應(yīng)用需要讓用戶(hù)在移動(dòng)Web上傳圖片文件了,正因如此,我們有些困難必須去攻克: 低網(wǎng)速下上傳進(jìn)度緩慢,用戶(hù)體驗(yàn)差 高并發(fā)下,后臺(tái)處理較大的上傳文件壓力大 或許有更多... 在攻克上面的一些...
摘要:大家好,我是云皓,話(huà)不多說(shuō),直入正題,獲取上傳文件自行獲取,也可通過(guò)的組件來(lái)獲取,轉(zhuǎn)化為文件,壓縮,轉(zhuǎn)換為文件,上傳。 大家好,我是云皓,話(huà)不多說(shuō),直入正題 1,獲取input上傳file文件(自行獲取,也可通過(guò)vant的upload組件來(lái)獲取)2,轉(zhuǎn)化為base64文件3,壓縮4,轉(zhuǎn)換為blob文件5,上傳。下面直接上代碼(本代碼段是用用在vue&vantui 里面, 原理都在,可根...
摘要:因?yàn)楫惒綁嚎s的時(shí)候我們上傳的文件的數(shù)量不定,所以上面需要使用關(guān)鍵字來(lái)修飾壓縮過(guò)程。而下面的壓縮過(guò)程的實(shí)現(xiàn),最終返回一個(gè)對(duì)象,當(dāng)壓縮過(guò)程已完成后,完整的生成的文件存于其中。 基于JSZip的前端文件壓縮 1. 簡(jiǎn)介: 這段時(shí)間,項(xiàng)目需要做一個(gè)這樣的功能:客戶(hù)端在上傳文件的時(shí)候(具體文件類(lèi)型),需要對(duì)文件進(jìn)行壓縮再上傳以節(jié)省帶寬和服務(wù)器端資源,完成這個(gè)功能,我們選擇了GitHub上的JSZ...
閱讀 1654·2019-08-30 13:04
閱讀 2205·2019-08-30 12:59
閱讀 1764·2019-08-29 18:34
閱讀 1857·2019-08-29 17:31
閱讀 1255·2019-08-29 15:42
閱讀 3530·2019-08-29 15:37
閱讀 2857·2019-08-29 13:45
閱讀 2771·2019-08-26 13:57