前端上傳組件
1. [FE] 用 FormData 上傳多個文件到 MultipartFile[] 介面
最近有一個場景，在提交表單的時候，需要實現添加附件的功能，
表單內容要先提交到服務端，創建一個 issue，然後再將附件添加到這個 issue 中。
所以，附件在用戶添加的時候，是 沒有立即上傳 的，
用戶可以隨意在瀏覽器端添加和刪除，issue 創建後再一起上傳。
前端採用的組件庫是 antd ，用到了 upload 組件。
服務端介面是自定義實現的，也許並不支持 antd upload 上傳組件的規范。
服務端接受數據時，使用了 MultipartFile ，這是 Spring 框架中常用的 寫法 。
我們先看看 html input[type=file] 組件默認行為，
點擊 「選擇文件」，瀏覽器會彈出一個窗口，
選中一個文件，點 「打開」，就會觸發 onchange 事件，
在 onchange 事件中，可以通過 e.target.files[0] 拿到剛才上傳的那個 File 對象 。
再來看一下 upload 組件的默認行為，
點擊 「添加」，瀏覽器也會彈出那個選擇文件的窗口，
選中一個文件，點 「打開」，發現上傳失敗了。
打開控制台，看到 upload 組件向 / 這個地址發送了一個 POST 請求，
數據格式如下，
我們可以向 upload 組件傳入 action 參數，修改 POST 請求地址，
但是，選中文件後立即上傳 不符合 我們的場景，我們需要提交表單之後，將多個文件統一上傳。
所以我們得自定義 upload 組件的行為。
upload 組件的有一個 customRequest 屬性（ #api ），
它可以配置自定義的上傳行為。
我們的思路是，先將選中後自動上傳的行為取消掉，然後再在提交表單後統一上傳。
取消自動上傳 的實現片段如下，
我們只需要在 customRequest 回調中，調用它的 onSuccess 參數即可。
刪除也是可以用的，
現在我們添加兩個附件，
接著來看前端怎樣將這些附件，統一上傳給服務端，具體實現如下，
可以看到請求成功了（項目中的 url 跟本例稍有不同，下圖只為了示意），
還有幾個需要注意的點：
上文 httpClient.post 實際調用了 XMLHttpRequest 發送請求，可能會遇到 跨域 的問題。
所以在調試上傳介面的時候，需要檢查一下服務端的配置，是否支持跨域請求。
CORS 相關的內容大致如下：
在預檢請求階段，服務端對 OPTIONS 請求的響應頭中會包含 Access-Control-Allow-Origin ，
表明服務端接受該域 http://foo.example 的跨域請求。
註：
這里需要後端實現 OPTIONS 方法，後端框架一般會通過配置方式統一處理（返回 200 或 204，不能是 4xx）。
如果未配置統一處理方式，框架可能會直接返回 404 導致預檢請求失敗，CORS 請求也會失敗。
使用 XMLHttpRequest 發送請求時，也可以攜帶 cookie 信息，
同時 預檢請求中服務端響應頭，也要包含 Access-Control-Allow-Credentials ，否則就不會發送 cookie
對於附帶 cookie 的請求，伺服器不能設置 Access-Control-Allow-Origin 的值為 「 * 」，否則請求將會失敗。
而將 Access-Control-Allow-Origin 的值設置為具體的地址 http://foo.example ，請求才能成功。
我們上傳功能用到了攜帶 cookie 的跨域請求，
可以看到服務端響應頭中確實包含了， Access-Control-Allow-Credentials 和 Access-Control-Allow-Origin 兩個欄位。
Spring: Uploading Files
Spring: org.springframework.web.multipart #MultipartFile
ant-design v4.11.1
Ant Design - Upload #API
MDN: CORS
2. FileUploader上傳文件獲取不到文件名的問題
看樣子是要前端通過訪問Service上傳文件。而且還用到了前端上傳組件。
前面瀏覽了一下感覺沒什麼問題，好像是Service有些問題。你確認你用的這個fileuploader生成的回傳表單name叫做qqfile嗎？你可以用fiddler或開發人員工具調試看看，確認名字是否用錯了。另外你這個寫法在Service容易引發未將對象引用設置到對象的實例錯誤，導致伺服器500錯誤，推薦使用下面的代碼。
context.Response.ContentType="text/plain";
//判斷文件數量是否大於零
if(context.Request.Files.Count>0)
{
//獲取文件對象
HttpPostedFilefile=context.Request.Files[0];
//判斷文件路徑是否為空
if(!string.IsNullOrEmpty(file.FileName))
{
//文件保存處理Start
//DoSomething
//End
//保存成功，回傳前台
context.Response.Write("ok");
}
}
3. VUE 前端大文件上傳如何實現
你好，這個自己寫起來，雖然也不是很難，但是覺得沒有必要寫，你可以看些elementUI上傳組件。
4. 前端面試,項目文件上傳一半失敗了 如何處理
前端面試,項目文件上傳一半失敗了的處理方法如下：
1、首先要確保論壇文件的完整性，不要少傳了某個文件，有好多人把upload.inc文件當做文本文件刪掉，所以導致無法上傳，不能上傳表現為上傳框那裡顯示一白條，其實下面有字的，按滑鼠左鍵往下拉可以拉出詳細出錯原因；
2、選擇正確的上傳組件，一般伺服器都支持無組件上傳的，如果你選擇了伺服器不允許的上傳組件，也是不能上傳；
3、檢查上傳目錄是否真實存在，如果不存在，你在上傳時總是會提示請選擇正確的文件，再檢查此文件夾是否有Internet來賓用戶的寫入權，如果只是存在，沒有寫入許可權同樣也是顯示請選擇正確的文件；
4、再檢查你上傳的文件大小是否超過了允許上傳的文件大小，首先檢查後台用戶組設置中每一用戶組允許上傳的文件大小，如果設置正確仍然不能上傳過大的文件，請與空間商聯系，需要在空間上修改；
5. 前端上傳圖片頭像到七牛雲格式變成text
流程：七牛雲後台的對象存儲功能，nodejs後台生成七牛雲的token，前端利用elementUI/ice的upload組件，文件名和token作為參數請求到七牛雲後台。
配置已經完成，寫介面用的是express，koa同理，主要做法是先接收前端的圖片流轉換成圖片寫入本地image文件中，然後再存儲到七牛雲，再將本地生成的圖片刪除，需要新建一個image文件夾
6. day06項目【整合阿里雲OSS和Excel導入分類】
為了解決海量數據存儲與彈性擴容，項目中我們採用雲存儲的解決方案- 阿里雲OSS。
1、開通「對象存儲OSS」服務
（1）申請阿里雲賬號
（2）實名認證
（3）開通「對象存儲OSS」服務
（4）進入管理控制台
2、創建Bucket
選擇：標准存儲、公共讀、不開通
3、上傳默認頭像
創建文件夾avatar，上傳默認的用戶頭像
1、在service模塊下創建子模塊service-oss
2、配置pom.xml
service-oss上級模塊service已經引入service的公共依賴，所以service-oss模塊只需引入阿里雲oss相關依賴即可，
service父模塊已經引入了service-base模塊，所以Swagger相關默認已經引入
3、配置application.properties
4、logback-spring.xml
5、創建啟動類
創建OssApplication.java
6、啟動項目
報錯 ：
spring boot 會默認載入org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration這個類，
而DataSourceAutoConfiguration類使用了@Configuration註解向spring注入了dataSource bean，又因為項目（oss模塊）中並沒有關於dataSource相關的配置信息，所以當spring創建dataSource bean時因缺少相關的信息就會報錯。
即可成功：
1、從配置文件讀取常量
創建常量讀取工具類：ConstantPropertiesUtil.java
使用@Value讀取application.properties里的配置內容
用spring的 InitializingBean 的 afterPropertiesSet 來初始化配置信息，這個方法將在所有的屬性被初始化後調用。
2、文件上傳
創建Service介面：uploadFileAvatar.java
實現：OssServiceImpl.java
參考SDK中的：Java->上傳文件->簡單上傳->流式上傳->上傳文件流
3、控制層
創建controller：FileUploadController.java
4、重啟oss服務
5、Swagger中測試文件上傳
解決上傳文件覆蓋問題：
測試：
6、配置nginx反向代理
配置nginx實現請求轉發的功能：
驗證：
1、復制頭像上傳組件
從vue-element-admin復制組件：
vue-element-admin/src/components/ImageCropper
vue-element-admin/src/components/PanThumb
2、前端參考實現
src/views/components-demo/avatarUpload.vue
3、前端添加文件上傳組件
src/views/e/teacher/save.vue
template：
引入組件模塊：
4、設置默認頭像（也可不設置）
onfig/dev.env.js中添加阿里雲oss bucket地址
組件中初始化頭像默認地址
5、js腳本實現上傳和圖片回顯
二、測試文件上傳
前後端聯調
1、數據導入：減輕錄入工作量
2、數據導出：統計信息歸檔
3、數據傳輸：異構系統之間數據傳輸
1、EasyExcel特點
Java領域解析、生成Excel比較有名的框架有Apache poi、jxl等。但他們都存在一個嚴重的問題就是非常的耗內存。如果你的系統並發量不大的話可能還行，但是一旦並發上來後一定會OOM或者JVM頻繁的full gc。
EasyExcel是阿里巴巴開源的一個excel處理框架， 以使用簡單、節省內存著稱 。EasyExcel能大大減少佔用內存的主要原因是在解析Excel時沒有將文件數據一次性全部載入到內存中，而是從磁碟上一行行讀取數據，逐個解析。
EasyExcel採用一行一行的解析模式，並將一行的解析結果以觀察者的模式通知處理（AnalysisEventListener）。
1、創建一個普通的maven項目
項目名：excel-easydemo
2、pom中引入xml相關依賴
3、創建實體類
設置表頭和添加的數據欄位
4 、實現寫操作
TestEasyExcel.java
（1）創建方法循環設置要添加到Excel的數據
（2）實現最終的添加操作（寫法一）
（3）實現最終的添加操作（寫法二）
public static void main(String[] args) throws Exception {
// 寫法2，方法二需要手動關閉流
//實現excel寫的操作
//1 設置寫入文件夾地址和excel文件名稱
String filename = "F:\write.xlsx";
ExcelWriter excelWriter=EasyExcel.write(fileName,DemoData.class).build();
WriteSheet writeSheet=EasyExcel.writerSheet("寫入方法二").build();
excelWriter.write(data(),writeSheet);
/// 千萬別忘記finish 會幫忙關閉流
excelWriter.finish();
}
1、創建實體類
2、創建讀取操作的監聽器
3、調用實現最終的讀取
public class TestEasyExcel {
public static void main(String[] args) {
//實現excel讀操作
// 寫法1：
String filename = "F:\write.xlsx";
// 這里 需要指定讀用哪個class去讀，然後讀取第一個sheet 文件流會自動關閉
EasyExcel.read(filename,DemoData.class,new ExcelListener()).sheet().doRead();
// 寫法2：
InputStream in = new BufferedInputStream(new FileInputStream("F:\01.xlsx"));
ExcelReader excelReader = EasyExcel.read(in, DemoData.class, new ExcelListener()).build();
ReadSheet readSheet = EasyExcel.readSheet(0).build();
excelReader.read(readSheet);
// 這里千萬別忘記關閉，讀的時候會創建臨時文件，到時磁碟會崩的
excelReader.finish();
}
1、編輯Excel模板
2、將文件上傳至阿里雲OSS
1、添加路由
2、添加vue組件
1、js定義數據
2、template
3、js上傳方法
4、回調函數
1、service-e模塊配置依賴
1、ESubjectController
2、創建和Excel對應的實體類
3、ESubjectService
（1）介面
（2）實現類
4、創建讀取Excel監聽器
1、參考 views/tree/index.vue
2、創建api
api/e/subject.js
3、list.vue
1、創建vo
2、創建controller
7. vue前端如何實現文件文件夾系統
文件上傳頁面的前端可以選擇使用一些比較好用的上傳組件，例如網路的開源組件WebUploader，澤優軟體的up6，這些組件基本能滿足文件上傳的一些日常所需功能，如非同步上傳文件，文件夾，拖拽式上傳，黏貼上傳，上傳進度監控，文件縮略圖，甚至是大文件斷點續傳，大文件秒傳。
需求：
支持大文件批量上傳（20G）和下載，同時需要保證上傳期間用戶電腦不出現卡死等體驗；
內網百兆網路上傳速度為12MB/S
伺服器內存佔用低
支持文件夾上傳，文件夾中的文件數量達到1萬個以上，且包含層級結構。
支持PC端全平台操作系統，Windows,Linux,Mac
支持文件和文件夾的批量下載，斷點續傳。刷新頁面後繼續傳輸。關閉瀏覽器後保留進度信息。
支持文件夾批量上傳下載，伺服器端保留文件夾層級結構，伺服器端文件夾層級結構與本地相同。
8. SpringBoot超大文件上傳如何實現
不管什麼技術，超大文件上傳（超出一次tcp上限）都是要做分片和合並的，無非是自己做還是找控制項的差別。
另外，springboot是後台接收，前端實現是由前端框架負責，比如vue。
以下是Vue+Springboot實現大文件上傳的二種方式：
1、利用ElementUI的el-upload
優點：
簡單方便，可以實現功能
缺點：
上傳速度太慢，沒有分片單線程上傳1個G的文件即使在區域網也很慢
上傳顯示的進度條不準確，進度已經100%了，但是還需要等很久在服務端才生成完文
2、利用網路的webuploader
優點：
WebUploader是網上比較推薦的方式，分片上傳大文件速度很快。
缺點：
必須依賴 jquery
不能 import 導入，只能在 index.html 里包含。
3. 利用vue-uploader
vue-uploader 是基於vue的uploader組件，預設就是分片上傳。
通過npm安裝，基本流程參考github上的說明即可。
上傳的基本原理就是前端根據文件大小，按塊大小分成很多塊，然後多線程同時上傳多個塊，同時調用服務端的上傳介面，服務端會生成很多小塊小塊的文件。
所有塊都上傳完之後，前端再調用一個服務端的merge介面，服務端把前面收到的所有塊文件按順序組合成最終的文件。
9. webuploader分片上傳的實現代碼（前後端分離）
本文介紹了webuploader分片上傳的實現代碼（前後端分離），分享給大家，具體如下：
WebUploader是由Bai
WebFE(FEX)團隊開發的一個簡單的以HTML5為主，FLASH為輔的現代文件上傳組件。在現代的瀏覽器裡面能充分發揮HTML5的優勢，同時又不摒棄主流IE瀏覽器，沿用原來的FLASH運行時，兼容IE6+，iOS
6+,
android
4+。兩套運行時，同樣的調用方式，可供用戶任意選用。採用大文件分片並發上傳，極大的提高了文件上傳效率。(這個是從官網上直接的解釋)
功能描述
1、webuploader是網路研發的上傳組件，文檔不是特別規整，但是也夠用了。
2、前端使用官網的上傳圖片demo，在此基礎上代碼略微調整做分片。既可以上傳圖片也可以上傳文件。文件超過分片大小才啟用分片。
3、分片上傳已做md5校驗，達到秒傳的效果。分片以後需要合並，可以先分片後合並，也可以邊分片邊合並，本示例採用的是邊分片邊合並的方案。
4、後端用springboot做框架搭建。springMVC做rest服務，開啟跨域訪問。
5、容器用springboot內置的tomcat插件，運行Application的main方法即可啟動服務；
顯示效果
關鍵代碼前端
WebUploader.Uploader.register({
'name':
'webUploaderHookCommand',
'before-send-file':
'beforeSendFile',
"before-send":
"beforeSend"
},
{
beforeSendFile:
function(file)
{
var
task
=
new
WebUploader.Deferred();
fileName
=
file.name;
fileSize
=
file.size;
(new
WebUploader.Uploader()).md5File(file,
0,
10
*
1024
*
1024).progress(function(percentage)
{}).then(function(val)
{
fileMd5
=
val;
var
url
=
checkUrl;
var
data
=
{
type:
0,
fileName:
fileName,
fileMd5:
fileMd5,
fileSize:
fileSize
};
$.ajax({
type:
"POST",
url:
url,
data:
data,
cache:
false,
async:
false,
//
同步
timeout:
1000,
//
todo
超時的話，只能認為該分片未上傳過
dataType:
"json",
error:
function(XMLHttpRequest,
textStatus,
errorThrown)
{
file.statusText
=
'server_error';
task.reject();
}
}).then(function(data,
textStatus,
jqXHR)
{
if(data.rtn
==
0)
{
if(data.obj
==
1)
{
file.statusText
=
'file_existed';
task.reject();
}
else
{
task.resolve();
}
}
else
{
task.reject();
}
});
});
return
task.promise();
},
beforeSend:
function(block)
{
var
task
=
new
WebUploader.Deferred();
var
url
=
checkUrl;
var
data
=
{
type:
1,
fileName:
fileName,
fileMd5:
fileMd5,
chunk:
block.chunk,
fileSize:
block.end
-
block.start
};
$.ajax({
type:
"POST",
url:
url,
data:
data,
cache:
false,
async:
false,
//
同步
timeout:
1000,
//
todo
超時的話，只能認為該分片未上傳過
dataType:
"json"
}).then(function(data,
textStatus,
jqXHR)
{
if(data.rtn
==
0
&&
data.obj
==
1)
{
task.reject();
//
分片存在，則跳過上傳
}
else
{
task.resolve();
}
});
this.owner.options.formData.fileMd5
=
fileMd5;
this.owner.options.formData.chunkSize
=
chunkSize;
return
task.promise();
}
});
//
實例化
uploader
=
WebUploader.create({
pick:
{
id:
'#filePicker',
label:
'點擊選擇文件'
},
formData:
{
uid:
123
},
dnd:
'#dndArea',
//指定文件拖拽的區域
paste:
'#uploader',
//指定監聽paste事件的容器，如果不指定，不啟用此功能。此功能為通過粘貼來添加截屏的圖片。建議設置為document.body.
swf:
'../plugins/webuploader/Uploader.swf',
chunked:
true,
chunkSize:
chunkSize,
chunkRetry:
false,
threads:
1,
server:
uploadUrl,
//
runtimeOrder:
'flash',
//
accept:
{
//
title:
'Images',
//
extensions:
'gif,jpg,jpeg,bmp,png',
//
mimeTypes:
'image/*'
//
},
//
禁掉全局的拖拽功能。這樣不會出現圖片拖進頁面的時候，把圖片打開。
disableGlobalDnd:
true,
fileNumLimit:
300
//限制多文件上傳的個數
//fileSizeLimit:
200
*
1024
*
1024,
//
限制所有文件的大小
200
M
//fileSingleSizeLimit:
50
*
1024
*
1024
//
限制單個文件的大小
50
M
});
後端
import
java.io.File;
import
java.io.IOException;
import
org.slf4j.Logger;
import
org.slf4j.LoggerFactory;
import
org.springframework.beans.factory.annotation.Value;
import
org.springframework.stereotype.Service;
import
org.springframework.web.multipart.MultipartFile;
import
com.bear.upload.util.FileUtil;
import
com.bear.upload.util.RETURN;
import
com.bear.upload.vo.CheckMd5FileVO;
import
com.bear.upload.vo.UploadVO;
@Service
public
class
ChunkUploadService
{
private
static
Logger
LOG
=
LoggerFactory.getLogger(ChunkUploadService.class);
@Value("${file.upload.path}")
private
String
UPLOAD_PATH;
private
static
final
String
Delimiter
=
"-";
/**
*
上傳之前校驗(整個文件、分片)
*
*
@param
md5FileVO
*
@return
*/
public
Object
check(CheckMd5FileVO
md5FileVO)
{
Integer
type
=
md5FileVO.getType();
Long
chunk
=
md5FileVO.getChunk();
String
fileName
=
md5FileVO.getFileName();
Long
fileSize
=
md5FileVO.getFileSize();
if
(type
==
0)
{//
未分片校驗
String
destfilePath
=
UPLOAD_PATH
+
File.separator
+
fileName;
File
destFile
=
new
File(destfilePath);
if
(destFile.exists()
&&
destFile.length()
==
fileSize)
{
return
RETURN.success("文件已存在，跳過",
1);
}
else
{
return
RETURN.success("文件不存在",
0);
}
}
else
{//
分片校驗
String
fileMd5
=
md5FileVO.getFileMd5();
String
destFileDir
=
UPLOAD_PATH
+
File.separator
+
fileMd5;
String
destFileName
=
chunk
+
Delimiter
+
fileName;
String
destFilePath
=
destFileDir
+
File.separator
+
destFileName;
File
destFile
=
new
File(destFilePath);
if
(destFile.exists()
&&
destFile.length()
==
fileSize)
{
return
RETURN.success("分片已存在，跳過",
1);
}
else
{
return
RETURN.success("分片不存在",
0);
}
}
}
/**
*
文件上傳
*
*
@param
file
*
@param
uploadVO
*
@param
appVersion
*
@return
*/
public
Object
upload(MultipartFile
file,
UploadVO
uploadVO)
{
Long
chunk
=
uploadVO.getChunk();
if
(chunk
==
null)
{//
沒有分片
return
UnChunkUpload(file,
uploadVO);
}
else
{//
分片
return
ChunkUpload(file,
uploadVO);
}
}
/**
*
分片上傳
*
*
@param
file
*
@param
uploadVO
*
@param
appVersion
*
@return
*/
public
Object
ChunkUpload(MultipartFile
file,
UploadVO
uploadVO)
{
String
fileName
=
uploadVO.getName();
String
fileMd5
=
uploadVO.getFileMd5();
Long
chunk
=
uploadVO.getChunk();//
當前片
Long
chunks
=
uploadVO.getChunks();//
總共多少片
//
分片目錄創建
String
chunkDirPath
=
UPLOAD_PATH
+
File.separator
+
fileMd5;
File
chunkDir
=
new
File(chunkDirPath);
if
(!chunkDir.exists())
{
chunkDir.mkdirs();
}
//
分片文件上傳
String
chunkFileName
=
chunk
+
Delimiter
+
fileName;
String
chunkFilePath
=
chunkDir
+
File.separator
+
chunkFileName;
File
chunkFile
=
new
File(chunkFilePath);
try
{
file.transferTo(chunkFile);
}
catch
(Exception
e)
{
LOG.error("分片上傳出錯",
e);
return
RETURN.fail("分片上傳出錯",
1);
}
//
合並分片
Long
chunkSize
=
uploadVO.getChunkSize();
long
seek
=
chunkSize
*
chunk;
String
destFilePath
=
UPLOAD_PATH
+
File.separator
+
fileName;
File
destFile
=
new
File(destFilePath);
if
(chunkFile.length()
>
0)
{
try
{
FileUtil.randomAccessFile(chunkFile,
destFile,
seek);
}
catch
(IOException
e)
{
LOG.error("分片{}合並失敗：{}",
chunkFile.getName(),
e.getMessage());
return
RETURN.fail("分片合並失敗",
1);
}
}
if
(chunk
==
chunks
-
1)
{
//
刪除分片文件夾
FileUtil.deleteDirectory(chunkDirPath);
return
RETURN.success("上傳成功",
1);
}
else
{
return
RETURN.fail("上傳中...",
1);
}
}
/**
*
未分片上傳
*
*
@param
file
*
@param
uploadVO
*
@param
appVersion
*
@return
*/
public
Object
UnChunkUpload(MultipartFile
file,
UploadVO
uploadVO)
{
String
fileName
=
uploadVO.getName();
//
String
fileMd5
=
uploadVO.getFileMd5();
//
文件上傳
File
destFile
=
new
File(UPLOAD_PATH
+
File.separator
+
fileName);
if
(file
!=
null
&&
!file.isEmpty())
{
//
上傳目錄
File
fileDir
=
new
File(UPLOAD_PATH);
if
(!fileDir.exists())
{
fileDir.mkdirs();
}
if
(destFile.exists())
{
destFile.delete();
}
try
{
file.transferTo(destFile);
return
RETURN.success("上傳成功",
0);
}
catch
(Exception
e)
{
LOG.error("文件上傳出錯",
e);
return
RETURN.fail("文件上傳出錯",
0);
}
}
return
RETURN.fail("上傳失敗",
0);
}
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:Vue2.0結合webuploader實現文件分片上傳功能使用WebUploader實現分片斷點上傳文件功能（二）webuploader在springMVC+jquery+Java開發環境下的大文件分片上傳的實例代碼jQuery
webuploader分片上傳大文件
10. 前端plupload上傳組件，上傳前怎麼獲取本地文件路徑
這個控制項取不到，所有的基於Flash的控制項都取不到，所有的基於HTML5的控制項同樣取不到，所以你不用試了。只能找基於ActiveX的控制項，ff,chr上面就找基於NPAPI的控制項。