vue 直传视频到阿里云OSS

先下载这个 ali-oss 插件

npm i ali-oss

如果项目中需要加密，再下载一个md5

npm i js-md5

话不多说，上代码

import OSS from "ali-oss";
import md5 from "js-md5";
export default {createOssClient() {return new Promise((resolve, reject) => {const client = new OSS({region: 'your', // 请设置成你的accessKeyId: 'your', // 请设置成你的accessKeySecret: 'your', // 请设置成你的bucket: 'your', // 请设置成你的secure: true // 上传链接返回支持https});resolve(client);});},ossUploadFile(option) {// console.log(option)const file = option.file;const self = this;return new Promise((resolve, reject) => {const date = new Date().getTime(); // 当前时间戳//这里匹配到的是const extensionName = file.name.split('.')[file.name.split('.').length-1]; // 文件扩展名const fileName = "video" + date + '.' + extensionName; // 文件名字（相对于根目录的路径 + 文件名）// 执行上传self.createOssClient().then(client => {// 异步上传,返回数据resolve({fileName: file.name,fileUrl: fileName});// 上传处理// 分片上传文件client.multipartUpload(fileName, file, {progress: function(p) {const e = {};e.percent = Math.floor(p * 100);option.onProgress(e);}}).then(val => {window.url = valif (val.res.statusCode === 200) {option.onSuccess(val);this.video_url = val.res.requestUrls[0].split("?")[0];//这个也很重要,必须切割,要不链接显示错误// console.log(val)return val;} else {option.onError("上传失败");}},err => {console.log('上传失败err',err);option.onError("上传失败");reject(err);});});});}
};

在另一个页面引入即可，下面是另一个页面的引入和使用

import oss from "./oss/ossjs";methods：{async fnUploadRequest_ossjs(option) {oss.ossUploadFile(option);}
}

一切准备就绪之后,如果报下面这个错误

Access to XMLHttpRequest at 'https://yiben01.oss-cn-beij.aliyuncs.com/video/1562445586655.png?uploads=' from origin 'http://localhost:9999' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

那就是你的这两个可能权限太高,或者是配置太高，或者是太低，总之我是修改了这个图片就能上传成功了

如果报下面这个错误

Please set the etag of expose-headers in OSS

可以去参考这个https://help.aliyun.com/document_detail/277773.html进行上边说的配置，就能接解决。

vue 直传视频到阿里云OSS相关推荐

vue直传图片到阿里云OSS（单张直接上传）
背景: 近期项目使用到多图片上传功能,常规的调用后端接口上传,可能会出现上传速度慢,体验不佳的情况.那么就考虑另一种上传方式.由前端直接上传到oss.快的一匹... 经过摸索,也实现了.代码其实没啥难 ...
PHP上传大文件视频到阿里云oss分片上传
下载阿里云oss的SDK composer require aliyuncs/oss-sdk-php 上传视频,我用的是分片上传,其实阿里云的文档已经写得很清楚了,不过这是当我把上传的功能写出来后才这 ...
vue+node.js操作阿里云OSS，上传和删除文件
效果图一.上传文件二.删除文件第一步,引入依赖 npm install ali-oss --save 第二步,写OSS配置文件(server/oss.js) 这里需要在阿里云开通子账号,赋予相应 ...
vue 直接上传视频到阿里云oss
1.安装oss npm install ali-oss --save 2.在src下的util文件创建utils.js工具类 /*** 时间日期格式化* @param format* @returns ...
PHP些个代码把数据库存储的点播视频和阿里云OSS文件批量下载到本机
最近有个业务需求,需要备份数据库的视频文件,写了这个代码,用5T的硬盘拷贝数据库的点播视频文件,保持原先OSS存储的目录结构,跑个本机程序备份到本机(用TP写的PHP代码配置的路径为: http:// ...
vue 上传文件至阿里云oss
先让后端在阿里云里面处理跨域问题参考这篇文章 vue直传图片到阿里云OSS(单张直接上传)__小郑有点困了的博客-CSDN博客_vue 阿里云背景:近期项目使用到多图片上传功能,常规的调用后端接 ...
uni-app 上传图片到阿里云oss
uni-app 上传本地图片或视频到阿里云oss,带中间圆形进度条前端控制文件直接将本地图片或视频上传到阿里云oss中,不用走后台接口即可上传 // 在自己的文件中引入配置主文件地址 import ...
微信小程序 - 超详细 “纯前端“ 将文件上传到阿里云 OSS，最新阿里云 OSS 直传音视频、图片、word、excel、ppt、office 文档（全程无需后端，前端文件直传阿里云oss服务器）
前言网上的教程乱七八糟却文件少代码(并且没注释),而且都已经很老了,对于新手来说真的无从下手. 本文站在新手小白的角度,实现微信小程序开发中,"前端直传" 上传文件到阿里云oss ...
Vue上传阿里云OSS(STS方式)
一.准备工作 1. 开通阿里云OSS服务,从控制台上获取AccessKeyId和AccessKeySecret. 2. 创建Bucket,并登录OSS控制台 3. 配置Bucket (很重要) 将al ...
vue项目中上传文件到阿里云oss方法
上传背景介绍在项目需求中,关于图片.视频.文件等上传文件,一般不是直接放置在自己的后台服务器上,一般都会购买云服务进行存储.譬如阿里云的oss对象存储. 那么,前端开发项目中,涉及到上传的功能时,我 ...

vue 直传视频到阿里云OSS

vue 直传视频到阿里云OSS相关推荐

最新文章

热门文章