1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > JS:Vue项目浏览器直接上传文件到阿里云OSS

JS:Vue项目浏览器直接上传文件到阿里云OSS

时间:2024-07-09 18:17:43

相关推荐

JS:Vue项目浏览器直接上传文件到阿里云OSS

OSS Browser.js SDK文档:

/document_detail/64041.html

OSS设置路径:权限管理-跨域设置

将来源设置成 *将Method设置成 GET, POST, PUT, DELETE, HEAD将Allowed Header设置成 *暴露Headers:设置为ETag、x-oss-request-id和x-oss-version-id

注意:暴露的headers没有设置,上传将会出现异常

安装JDK

npm install ali-oss -S

oss文件上传

let OSS = require("ali-oss");// 配置OSS参数let client = new OSS({// region以杭州为例(oss-cn-hangzhou),其他region按实际情况填写。region: "<Your region>",// 阿里云主账号AccessKey拥有所有API的访问权限,风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维,请登录RAM控制台创建RAM账号。accessKeyId: "<Your AccessKeyId>",accessKeySecret: "<Your AccessKeySecret>",bucket: "Your bucket name",});// 基本链接const BASE_URL = "http://demo.oss-cn-/";/**** @param filepath 文件存储路径* @param file 文件对象* @param progress 上传进度回调函数*/export async function uploadObject(filepath, file, progress) {let result = await client.multipartUpload(filepath, file, {progress });if (result.res.status == 200) {return BASE_URL + filepath;}}

进度条回调函数

function handleProgress(p) {console.log((p * 100).toFixed(2));}

用到的文件助手函数 file-utils.js

let moment = require("moment");const md5 = require("js-md5");/*** 以当前时间戳做md5为文件名并拼接上原有扩展名* @param {*} filename*/function getFilename(filename) {// 扩展名let ext = filename.split(".").slice(-1)[0];// 文件名let name = md5(new Date().getTime().toString()) + "." + ext;return name;}/*** 按照年月存静态资源* @param {*} dirname, filename*/function getFilepath(dirname, filename) {let day = moment().format("YYYY-MM");// 文件路径let fullname = dirname + "/" + day + "/" + filename;return fullname;}filename = "demo.txt";dirname = "media";fullname = getFilename(filename)console.log(fullname);// 2654231108e34b9dd7e4670e7049caea.txtfilepath = getFilepath(dirname, fullname)console.log(filepath);// media/-11/2654231108e34b9dd7e4670e7049caea.txt

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。