Input
<input type="file" /> 標簽
type= "file" 時
定義支持上傳的文件類型：設置 accept
accept="image/bmp,image/jpeg,image/jpg,image/png"
效果：
點擊選擇文件，彈出選擇文件的彈框，被允許的類型可以選擇，
未被accept的類型是灰色，不可選。
坑： input 為file cursor: pointer 無效 ？
上傳文件樣式太丑。。
整容樣式如下。
.
button {
position: relative;
display: inline-block;
width:100px;
height: 36px;
line-height: 36px;
.
input {
position: absolute;
top: 0;
left: -50px;
display: inline-block;
height: 100%;
line-height: 36px;
overflow: hidden;
opacity: 0;
z-index: 100;
cursor: pointer;
.img-pre { // 支持一個或多個圖片預覽
display: inline-block;
position: absolute;
left: 125px;
top: -3px;
white-space: nowrap;
& > img {
display: inline-block;
height: 40px;
width: 40px;
margin: 0 5px;
}
}
}
}
multiple
添加這個屬性可以以此選擇多個，默認是展示選中的個數，一次選中多個，不是多次不能添加。
onchange
事件返回 bool 值，返回值為true時文件選擇成功，返回值為 false 文件選擇失敗
onchange事件默認參數 event 可以獲取 e.target.files 獲取已選擇的文件列表對象數組，單項包含文件屬性值如下：
主要文件屬性如下：
lastModified: 1565074500694
lastModifiedDate: Tue Aug 06 2019 14:55:00 GMT+0800 (中國標准時間) {}
name: "RNGuestGuide_bitmap.png"
size: 152720 （單位是 Byte 字節 Math.round(size / 1000) Kb ）
type: "image/png"
圖片上款后最好有預覽功能，繼續優化。
樣式需要調整，上面已添加
預覽思路： 獲取文件file -> URL.createObjectURL(file) -> 獲取圖片 url地址數組 -> 創建img標簽添加url，添加到dom -> 完成預覽。
方法優化思路：支持多圖預覽，支持文件個數可變，支持統一調用。
代碼如下：
參數說明： fes: input file對象， fileLength: 圖片個數限制值。
fileCheck (fes, fileLength) {
let files = Array.from(fes);
let fileCount = files && files.length;
if (fileCount <= fileLength) {
if (files.some(v => (Math.round(v.size / 1000) > 500))) {
Toast.show({ info: '圖片大小最大支持500Kb', duration: 2000});
return false;
} else {
let urls = [];
files.forEach((v) => {
urls.push(URL.createObjectURL(v));
});
return urls;
}
} else {
Toast.show({ info: '圖片超過個數', duration: 2000});
return false;
}
}
於是可以得到一個上傳一組圖片的處理方案。
FormData
批量上傳多個文件，是否支持上傳多個文件的情況，其實很簡單。
const formData = new FormData(); formData.append('file', file); // formData 作為請求data
const formData = new FormData();
files.forEach((item, flag) => {
formData.append(`file`, item.file, item.file.name);
});
// 多個的情況，append多次，后端會按照file解析
注意： formData對象直接打印是看不到數據的，打印出的是FormData的原型，空對象一枚，可以用formData.get('file')的方式獲取你append的file。