檔案上傳（二進位制檔案流）

業務需求：

• 檔案上傳在專案開發過程中是必不可少的一項功能。目前大多數檔案上傳都是採用檔案流的形式進行上傳。隨著技術的進步，雲服務技術的產生，現在上傳檔案相比原來更迅速、更方便，對上傳檔案的管理較之前來說方便了許多；
• 為兼顧原有的專案，上傳檔案沒有采用現在使用比較多的阿里雲oss檔案直傳，而是採用的後臺輔助儲存上傳的形式來進行檔案的儲存。相對來說，檔案上傳比較慢，等待時間有點長。獲取檔案不像oss直傳那樣返回一個絕對的地址連結，而是返回的一個檔案的key，通過指定的引數拼接來換取圖片地址；
• 此次簡稱為‘檔案流上傳’，前期開發的時候出現了一些錯誤，現將原有的檔案流上傳檔案的具體實現步驟做相應分析處理，以便日後開發過程中使用。

效果圖：

• 注：圖片上傳成功後，會在右側灰色圖片區域內進行展示。

佈局程式碼（圖一）：

• 基於【 Vue 】
• 採用elementUI的el-input標籤與input檔案上傳標籤相結合的方式；
• wtLoading為UI框架的el-button按鈕loading載入狀態。

樣式程式碼：

// 上傳按鈕樣式佈局
.uploadBtn {
		display: block;
		height: 100%;
		width: 100%;
		position: relative;
		overflow: hidden;
	}

.uploadBtn>input[type="file"] {
		width: 100%;
		opacity: 0;
		cursor: pointer;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
}
 

實現程式碼【 vue 】：

// 方式一：基於vue
uploadImg(file) {
	// 採用formData格式
	let fd = new FormData();
	fd.append("imgData", file);
	this.$axios
		.post("圖片上傳api", fd)
		.then(res => {
			let data = res.data;
			if (data.code == "1") {
				// 返回生成的圖片ID
				this.imgGid = data.imgGid;
				// 拼接圖片Id，獲取絕對地址
				this.imageUrl = this.pic + data.imgGid;
				console.log('上傳成功！')
			} else {
				console.log('上傳失敗！')
			}
		});
}
 

佈局程式碼（圖二）：

• 基於【 JavaScript 】
• 藉助jQuery的form表單提交實現二進位制流檔案上傳；
• 上傳的過程中會動態載入一張loading.gif動態圖，當圖片上傳完成或者上傳失敗時候移除loading圖。

實現程式碼【 JavaScript 】:

const saveReport = function() {
	/* jQuery.form表單提交資料 */
	$('#addImg').ajaxSubmit({
		type: 'post',
		url: '上傳介面api',
		data: {
			picType: 'jpg' // 圖片格式
		},
		dataType: 'json',
		success: function(res) {
			if (res.code == 1) {
				/* 生成的圖片ID */
				avatars = res.imgGid;
				/* 拼接回顯圖片 */
				$('#upJPG').prepend('<img src="' + res.imgGid + '" class="imgStyle" />');
				/* 刪除圖片 */
				$('.close').on('click', function(e) {
					/* 阻止圖片跳轉 */
					e.stopPropagation();
					/* 對dom的操作 */
				});
			}
		},
		error: function(err) {
			hintCard('網路錯誤');
		}
	});
	/* 防止表單自己再次提交，並跳轉頁面 */
	return false;
}