圖片上傳（二進制文件流）

文件上傳（二進制文件流）

業務需求：

• 文件上傳在項目開發過程中是必不可少的一項功能。目前大多數文件上傳都是采用文件流的形式進行上傳。隨着技術的進步，雲服務技術的產生，現在上傳文件相比原來更迅速、更方便，對上傳文件的管理較之前來說方便了許多；
• 為兼顧原有的項目，上傳文件沒有采用現在使用比較多的阿里雲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;
}