七牛云是常见的三方存储服务商之一，在一些小型企业或者图片、视频等文件过多的项目中。从成本等方面考虑，会将图片或视频等文件存储到第三方存储服务商中。

那么在前端开发中，我们可以如何使用第三方存储实现图片或视频等大文件的存储呢？

本篇文章内容就来详细介绍在vue项目中如何使用七牛云第三方存储实现文件的直传。

一、file文件的控制

<input  ref="fileInput" type="file" @change="handleFileChange" />

二、公用方法直传七牛云COS

async handleFileChange() {
	//上传的文件
	const file = this.$refs.fileInput.files[0]; // 获取input file选择的文件
	let timestamp = Date.parse(new Date());
	let date = new Date(timestamp);
	let Y = date.getFullYear(); //年
	let M = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1; //月
	let D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(); //日
	let h = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(); //时
	let m = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(); //分
	let s = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); //秒
	let tempFormat = file.name.substring(file.name.lastIndexOf(".") + 1);
	let filePath = "upload/video/" +  Y + M + D +  "/" + Y + M + D + h + m + s +  "." + tempFormat;
	//七牛云直传
	const formData = new FormData(); // 发送至服务器的数据
	formData.append("file", file); // 添加文件数据到formData
	formData.append("file_type", "file"); // 添加文件数据到formData
	formData.append("key", filePath); // 添加文件数据到formData
	formData.append("token", '后台数据生成的七牛云直传token'); // 添加文件数据到formData
	this.axios.post("https://up-z2.qiniup.com", formData).then((res) => {
		这里是上传成功后，返回的数据
	})
}

注意项：

    up-z2.qiniup.com请求域名中，up-z2为每个区域不同所需要的二级域名也不一样。