阿里雲OSS圖片直傳

簡介：

開發過程中，多多少少會用到圖片上傳、檔案上傳等，大多數都會選擇第三方雲服務提供的相關功能，比如阿里雲、騰訊雲、七牛雲等等雲服務提供商提供的檔案儲存運營商提供的服務。本次介紹使用的主要是阿里雲的OSS檔案直傳，阿里雲端儲存檔案方式有多種，目前主要就工作中用到的阿里雲oss檔案直傳做案例做筆記，以便於幫助有類似需求的同行及自己學習。

注意事項：

1、檔案分類：主要是方便日後檔案的管理，同時也便於查詢。
2、檔案重新命名：上傳檔案有時候會出現重名等問題，有時候會給使用者造成一定的影響，不利用使用者區分檔案是否上傳；統一規則對檔案進行命名，目的是為了方便日後檔案管理維護等。
3、檔案大小限制

程式碼例項：

• OSS配置

/**
 * [OSS配置]
 * @type {Object}
 */
const conf = {
	accessKeyId: "accessKeyId",// OSS上傳需要的Id
	accessKeySecret: "accessKeySecret",// OSS上傳需要的Secret
	ali: "https://xxxxx.oss-cn-beijing.aliyuncs.com",// 阿里雲OSS儲存物件地址
  bucket: "xxxxx" // 型別
};
 

• 檔案重新命名（檔案分類）

/**
 * [檔案重新命名]
 * @param  {String} suffixName [檔案字尾名]
 * @return {String}            [檔案相對路徑名]
 */
const fileRename = suffixName => {
  // 處理時間戳
	const moment = new Date();
	let yyyy = moment.getFullYear(),
		MM = moment.getMonth() + 1,
		dd = moment.getDate(),
		hh = moment.getHours(),
		mm = moment.getMinutes(),
		ss = moment.getSeconds();
  // 補“0”
	MM = MM <= 9 ? "0" + MM : MM;
	dd = dd <= 9 ? "0" + dd : dd;
	// 5位數字的隨機數
	let rm = (Math.random() * 1e5).toFixed(),
		path = `${yyyy}${MM}/${dd}_${hh}${mm}${ss}_${rm}`;
	return path + suffixName;
};
// 格式：yyyyMM/dd_hhmmss_rm.fileType
 

• 上傳圖片函式（uploadImg）

/**
 * [上傳圖片]
 * @param  {Object} file     [上傳檔案例項]
 * @param  {String} filePath [上傳檔案相對路徑]
 * @return {String}          [上傳圖片生成的路徑地址]
 */
const uploadImg = async (file, filePath) => {
	let path = filePath.toLowerCase(),
		dotIndex = path.lastIndexOf("."),
		fileType = path.substring(dotIndex);
	const typeString = ".jpg.jpeg.png";
	// 限制類型
	if (!typeString.includes(fileType)) {
		Message.error("上傳圖片型別有誤，請重新上傳！");
		return null;
	}
	// 限制大小
	if (file.size >= 1024 * 1024) {
		this.$message.error("上傳的圖片大小不能超過 1M，請重新上傳！");
		return null;
	}
	// 檔案字尾名
	let suffixName = fileRename(fileType);
	// FormData
	const form = new FormData();
	form.append("key", "picture/" + suffixName);
	form.append("file", file);
	form.append("accessKeyId", conf.accessKeyId);
	form.append("success_action_status", 200);

	try {
		const res = await axios.post(conf.ali, form);
		if (res.status == 200) {
			Message.success("上傳成功");
			return conf.ali + "/picture/" + suffixName;
		} else {
			Message.error("上傳失敗：" + res.status);
			return null;
		}
	} catch (error) {
		console.log(error);
		Message.error("圖片上傳失敗");
		return null;
	}
};

• 例項繫結vue

import Vue from "vue";
import App from "./App.vue";
// 檔案上傳
import uploadImg from "./assets/js/uploadImg";

Object.defineProperties(Vue.prototype, {
	$oss: { value: uploadImg }
});

new Vue({
	render: h => h(App)
}).$mount("#app");

例項使用：

<template>
	<el-form :model="user" ref="userForm" :rules="rules" size="small" label-width="80px" class="dialog-form">
		<el-form-item label="上傳圖片">
			<el-row>
				<el-col :span="8">
					<el-button type="primary" icon="el-icon-upload" class="uploadBtn" :loading="loading">
						上傳圖片
						<input type="file" accept=".jpg, .jpeg, .png" @change="uploadImg" />
					</el-button>
					<p class="up-tip">
						注：若輸入使用者頭像連結地址同時又上傳圖片，則上傳的圖片優先順序高於輸入的連結地址（建議尺寸200*200）
					</p>
				</el-col>
				<!-- 展示圖片 -->
				<el-col :span="15" :offset="1">
					<el-image :src="avatar" draggable="false" style="width:144px;height:144px;">
						<div slot="error" class="image-slot">
							<i class="el-icon-picture-outline"></i>
						</div>
					</el-image>
				</el-col>
			</el-row>
		</el-form-item>
	</el-form>
</template>

<script>
export default {
	name: "UploadImg",
	data() {
		return {
			loading: false,
			avatar: ""
		};
	},
	methods: {
		// 上傳圖片
		uploadImg(e) {
			// 載入指示器
			this.loading = true;
			// file例項
			let file = e.target.files[0];
			// file相對路徑
			let filePath = e.target.value;
			// 檔案上傳
			this.$oss(file, filePath).then(url => {
				this.loading = false;
				!!url && (this.avatar = url);
			});
		}
	}
};
</script>

注：圖片上傳主要按鈕 <input type="file" accept=".jpg, .jpeg, .png" @change="uploadImg" /> ，其中 accept 作用主要是過濾指定型別檔案，預設為空（即不做任何限制）。