list.vue
comUpload.js
前端git項目
後端git地址
鏈接地址
『貳』 JS-超大文件上傳-如何上傳文件-大文件上傳
可以試試這樣
前端通過 input type = "file" 接收文件
然後使用文件的 slice 的方法對文件進行分片
將每一片提交到後台依次提交到後台，提交時通過 formData 提交，添加幾個欄位
(1). 這次上傳文件的惟一 id
(2). 上傳的狀態，是開始，還是上傳中，還是上傳結束
(3). 分片的位置，比如是第一片，第二片
(4). 分片的數據
後端當接收到一個文件 id 的結束標識時，把對應的分片按位置數據拼接起來就行
『叄』 js指定讀取上傳文件的行數
JS指定讀取上傳文件的行數，對這點的話還需要進行什麼？需要進行一個指定的讀取，一方面兒指定讀取，它能精確到什麼位置呢？青島有多少行，第一個是多少行，第二個是有多少字兒，第三個有多少個，這個編碼的一個情況，一共這么三個方式，三種這個類型可以說是齊頭並進，所以這S來講的話，他尤其面對這個確定一個行數，確定文件內容，以及確定這個文件字數來講的話，這裡面實際上發揮了非常大的作用，可以這么講
『肆』 文件上傳漏洞原理是什麼
文件上傳原理
在文件上傳的功能處，若服務端腳本語言未對上傳的文件進行嚴格驗證和過濾，導致惡意用戶上傳惡意的腳本文件時，就有可能獲取執行服務端命令的能力，這就是文件上傳漏洞。
文件上傳漏洞高危觸發點
相冊、頭像上傳
視頻、照片分享
附件上傳（論壇發帖、郵箱）
文件管理器
存在文件上傳功能的地方都有可能存在文件上傳漏洞，比如相冊、頭像上傳，視頻、照片分享。論壇發帖和郵箱等可以上傳附件的地方也是上傳漏洞的高危地帶。另外像文件管理器這樣的功能也有可能被攻擊者所利用值得注意的是，如果移動端也存在類似的操作的話，那麼相同的原理，也存在文件上傳漏洞的風險。
為了防禦文件上傳漏洞的產生，需要在服務端做嚴格的防護，因為瀏覽器、客戶端傳回的數據並不可信任。首先是第一道防線，文件類型檢測，上傳的文件需要經過嚴格的文件類型檢測防止上傳的文件是惡意腳本。
上傳之後的文件要進行重命名。
如果上傳的文件是圖片類型，可以選擇使用重繪圖的方式對圖片進行保存，但是這種方式會對服務端性能稍有影響
最後，文件上傳的目錄不可賦予可執行許可權，可以使用BOS這樣的雲存儲服務，當然最方便的還是使用BOS這樣現成的雲存儲服務
『伍』 js文件上傳中遇到的知識點
在前端開發中，我們經常遇到上傳文件的需求，以前都是用到時再找資料，但總是感覺對這塊不熟，最近翻資料學習了一下，記錄一下。
本文中涉及的知識點有：FileList對象，Blob對象，File對象，URL對象、FormData對象等。
本文參考 網道 ，總結而來。另外，強烈推薦網道，可以去 網道的官方 看看，是阮一峰大神發起的項目，提供互聯網開發文檔，文檔非常全面易懂。
FileList對象，是一個像數組的對象，擁有length屬性和item()方法，同時，它的每一項都是File對象。
input 標簽，將type設為file，之後得到的files屬性就是一個FileList對象。
blob 對象表示1個二進制文件的數據內容。blob對象和arraybuffer區別是，blob對象用於操作二進制文件，arraybuffer用於操作內存。
blob 對象擁有2個屬性和1個方法，分別是size(單位是位元組)、type屬性和slice()方法。
File 對象是一種特殊的Blob 對象。它在繼承了size、type屬性外，還同時有name、lastModified、lastModifiedDate等幾個屬性。
FileList 對象中的每一項都是File 對象。
拿到File 對象之後就要進行操作，下面是操作。
URL.createObjectURL(file) 允許為File 對象創建一個臨時鏈接，
FileReader 對象的屬性和方法比較多，屬性中比較重要的是result，方法中比較重要的是
FileReader 對象的所有屬性和方法可以參考 這里 ,這里就不再列出來了。
在早期的互聯網時候，提交數據都是用表單。表單提交數據有些缺陷，例如無法校驗表單數據，會刷新整個頁面等。隨著Ajax的興起，頁面表單提交數據慢慢退出歷史舞台，但有時上傳文件時我們偶爾會用到表單提交數據。
在調用構造函數new FormData(form)構造formdata對象時需要傳入form節點，如果不傳入，則默認構建空表單。如果傳入，則按照key=value的時候構建表單。
可以看看效果圖
FormData 對象主要的方法有：
cavas壓縮圖片其實很簡單，無非就是幾個步驟：
1、選擇圖片，判斷圖片是否大於2M（用File對象的size進行判斷，size的單位是位元組）；
2、用FileReader對象讀取文件成base64,
3、然後創建Image對象，賦值src屬性，在Image對象載入完成的回調里創建cavas並繪制圖片(根據圖片是否大於2M動態調整畫布大小)；
4、將cavas轉成blob，拼在formdata中用ajax上傳。
這篇文章到這里也就結束了，這篇文章包含了一些瀏覽器中提供的對象，可以看到都是很簡單的內容。
『陸』 js 大文件分片上傳處理如何實現
推薦採用webuploader控制項來解決。
關於WebUploader的功能說明：
大文件上傳續傳
支持超大文件上傳(100G+)和續傳，可以關閉瀏覽器，重啟系統後仍然繼續上傳。
開源
提供ASP.NET,JSP,PHP示例和源代碼，其中JSP提供MySQL,Oracle,SQL Server資料庫的配置和示例代碼。
分片、並發
分片與並發結合，將一個大文件分割成多塊，並發上傳，極大地提高大文件的上傳速度。
當網路問題導致傳輸錯誤時，只需要重傳出錯分片，而不是整個文件。另外分片傳輸能夠更加實時的跟蹤上傳進度。
預覽、壓縮
支持常用圖片格式jpg,jpeg,gif,bmp,png預覽與壓縮，節省網路數據傳輸。
解析jpeg中的meta信息，對於各種orientation做了正確的處理，同時壓縮後上傳保留圖片的所有原始meta數據。
多途徑添加文件
支持文件多選，類型過濾，拖拽(文件&文件夾)，圖片粘貼功能。上傳本地指定路徑的文件，不需要通過點擊按鈕選擇文件。
粘貼功能主要體現在當有圖片數據在剪切板中時（截屏工具如QQ(Ctrl + ALT + A), 網頁中右擊圖片點擊復制），Ctrl + V便可添加此圖片文件。
HTML5 & FLASH
兼容主流瀏覽器和低版本瀏覽器，介面一致，實現了兩套運行時支持，用戶無需關心內部用了什麼內核。而且支持IE6，IE8瀏覽器。
同時Flash部分沒有做任何UI相關的工作，方便不關心flash的用戶擴展和自定義業務需求。
基於內存映射模式進行IO操作，充分發揮操作系統性能。
MD5秒傳
當文件體積大、量比較多時，支持上傳前做文件md5值驗證，一致則可直接跳過。
如果服務端與前端統一修改演算法，取段md5，可大大提升驗證性能，耗時在20ms左右。
易擴展、可拆分
採用可拆分機制, 將各個功能獨立成了小組件，可自由搭配。
採用AMD規范組織代碼，清晰明了，方便高級玩家擴展。
『柒』 最近在研究nodejs如何實現文件上傳功能
前端formdata或者Ajax上傳文件
Node端：用multiparty接收文件，再用fs.rename將文件存儲到你需要的位置。
var MULTIPARTY = require('multiparty');
var FS = require('fs');
var saveTowerFile = function (req, res, next) {
var form = new MULTIPARTY.Form({uploadDir: "../appData/excel/"});
form.parse(req, function (err, fields, files) {
if (err) {
console.log("上傳失敗！" + err);
var errcode = {result: "失敗"};
res.send(errcode);
return;
} else {
var inputFile = files.file[0];
var uploadedPath = inputFile.path;
var dstPath = '../appData/excel/' + UUID.v1();
FS.rename(uploadedPath, dstPath, function(err) {
if (err) {
var errcode = {result: "失敗"};
res.send(errcode);
return;
} else {
debug('rename ok');
res.send(「OK」);
}
})
}
});
};
『捌』 文件上傳漏洞
在上網的過程中，經常會將一些如圖片、壓縮包之類的文件上傳到遠端伺服器進行保存。文件上傳攻擊指的是惡意攻擊者利用一些站點沒有對文件的類型做很好的校驗，上傳了可執行的文件或者腳本，並且通過腳本獲得伺服器上相應的權利，或者是通過誘導外部用戶訪問、下載上傳的病毒或木馬文件，達到攻擊的目的。為了防範用戶上傳惡意的可執行文件和腳本，以及將文件上傳伺服器當做免費的文件存儲伺服器使用，我們需要對上傳的文件類型進行白名單（非黑名單，這點非常重要）校驗，並且限制上傳文件的大小，上傳的文件需要進行重新命名，使攻擊者無法猜測到上傳文件的訪問路徑。
對於上傳的文件來說，不能簡單地通過後綴名稱來判斷文件的類型，因為惡意攻擊可以將可執行文件的後綴名稱改成圖片或者其他後綴類型，誘導用戶執行。因此，判斷文件類型需要使用更安全的方式。很多類型的文件，起始的幾個位元組內容是固定的，因此，根據這幾個位元組的內容，就可以確定文件類型，這幾個位元組也被稱為魔數( magic number)。
『玖』 java web前端上傳文件到後台常用的幾種方式
1、使用form表單提交
但是這里要記得添加enctype屬性，這個屬性是指定form表單在向伺服器提交之前，對表單數據如何進行編碼。 文件域中的name="file"屬性的值，需要和後台接收的對象名一致，不然接收不到。
2、使用ajax提交文件
使用ajax提交首先引入jquery-form.js文件才能實現，接著使用上面的html代碼，加入以js則可以實現ajax提交文件。
3、使用FormData對象
4、後台接收文件，框架採用的Spring Boot 微服務框架，因為該框架搭建很方便所以採用這個框架寫例子。
『拾』 使用jquery.form.js實現文件上傳及進度條前端代碼
ajax的表單提交只能提交data數據到後台，沒法實現file文件的上傳還有展示進度功能，這里用到form.js的插件來實現，搭配css樣式簡單易上手，而且高大上，推薦使用。
需要解釋下我的結構， #upload-input-file 的input標簽是真實的文件上傳按鈕，包裹form標簽後可以實現上傳功能， #upload-input-btn 的button標簽是展示給用戶的按鈕，因為需要樣式的美化。上傳完成生成的文件名將會顯示在 .upload-file-result 裡面， .progress 是進度條的位置，先讓他隱藏加上 hidden 的class， .progress-bar 是進度條的主體， .progress-bar-status 是進度條的文本提醒。
去掉hidden的class，看到的效果是這樣的
[圖片上傳失敗...(image-2c700a-1548557865446)]
將上傳事件綁定在file的input裡面，綁定方式就隨意了。
var progress = $(".progress-bar"), status = $(".progress-bar-status"), percentVal = '0%'; //上傳步驟 $("#myupload").ajaxSubmit({ url: uploadUrl, type: "POST", dataType: 'json', beforeSend: function () { $(".progress").removeClass("hidden"); progress.width(percentVal); status.html(percentVal); }, uploadProgress: function (event, position, total, percentComplete) { percentVal = percentComplete + '%'; progress.width(percentVal); status.html(percentVal); console.log(percentVal, position, total); }, success: function (result) { percentVal = '100%'; progress.width(percentVal); status.html(percentVal); //獲取上傳文件信息 uploadFileResult.push(result); // console.log(uploadFileResult); $(".upload-file-result").html(result.name); $("#upload-input-file").val(''); }, error: function (XMLHttpRequest, textStatus, errorThrown) { console.log(errorThrown); $(".upload-file-result").empty(); } });
[圖片上傳失敗...(image-3d6ae0-1548557865446)]
[圖片上傳失敗...(image-9f0adf-1548557865446)]
更多用法可以 參考官網