vue2实现后台生成token将视频等大文件存储到七牛云中完整代码说明
Vue
2025-05-06 20:30:16
七牛云是常见的三方存储服务商之一,在一些小型企业或者图片、视频等文件过多的项目中。从成本等方面考虑,会将图片或视频等文件存储到第三方存储服务商中。
那么在前端开发中,我们可以如何使用第三方存储实现图片或视频等大文件的存储呢?
本篇文章内容就来详细介绍在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为每个区域不同所需要的二级域名也不一样。

891篇文章
256人已阅读