文档章节

文件上传到oss代码片段

放开那个女孩
 放开那个女孩
发布于 2018/02/26 14:41
字数 490
阅读 167
收藏 0
import axios from '@/global/axios.js'

let expire = 0
let accessKeyId
let policy
let signature
let host
let callback

// 获取policy
function getPolicy (file, filePath, changeSize, callbackImg) {
    // 可以判断当前expire是否超过了当前时间,如果超过了当前时间,就重新取一下.3s 做为缓冲
    let now = new Date().getTime() / 1000
    if (expire < now + 3) {
        axios.get('/api-oss/oss/policy')
            .then((result) => {
            let res = result.data
            if (res.code === 2000) {
            expire = res.data.expire
            accessKeyId = res.data.accessKeyId
            policy = res.data.policy
            signature = res.data.signature
            host = res.data.host
            callback = res.data.callback

            if (file.type.split('/')[0] === 'image') {
                imgChange(file, filePath, changeSize, callbackImg)
            } else {
                callbackOss(file, filePath, callbackImg)
            }
        }
    })
    } else {
        if (file.type.split('/')[0] === 'image') {
            imgChange(file, filePath, changeSize, callbackImg)
        } else {
            callbackOss(file, filePath, callbackImg)
        }
    }
}

// 上传文件到oss
function callbackOss (fileObj, filePath, callbackImg) {
    let formData = new FormData()
    formData.append('key', filePath)
    formData.append('policy', policy)
    formData.append('OSSAccessKeyId', accessKeyId)
    formData.append('success_action_status', '200') // 让服务端返回200,不然,默认会返回204
    formData.append('callback', callback)
    formData.append('signature', signature)
    formData.append('file', fileObj)

    let config = {
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    }
    axios.post(host, formData, config)
        .then(function (result) {
            uploadOss.imgPath = host + '/' + result.data.data.filename
            if (callbackImg) {
                callbackImg()
            }
        })
}

// 图片压缩函数
function imgChange (file, basePath, changeSize, callbackImg) {
    let changeSizeDefault = changeSize || '1'
    let reader = new FileReader()
    let img = new Image()
    reader.readAsDataURL(file)
    reader.onload = function (e) {
        img.src = e.target.result
    }
    let canvas = document.createElement('canvas')
    let context = canvas.getContext('2d')
    img.onload = function () {
        // 图片原生尺寸
        let originWidth = this.width
        let originHeight = this.height

        canvas.width = originWidth
        canvas.height = originHeight

        context.clearRect(0, 0, originWidth, originHeight)
        context.drawImage(img, 0, 0, originWidth, originHeight)
        canvas.toBlob(function (blob) {
            callbackOss(blob, basePath, callbackImg)
        }, file.type || 'image/png', changeSizeDefault)
    }
}

/**
 * 获取文件路径
 * @method getFilePath
 * @param {object} file 文件对象
 * @param {string} basePath 基础路径
 * @return {string} filePath 文件路径
 */
function getFilePath (file, basePath) {
    let filePath = ''
    let fileExtension = getBaseExtension(file.type)
    let filename = getUuid() + '.' + fileExtension
    let basePathRep = replace(basePath)
    if (basePathRep === '') {
        filePath = filename
    } else {
        filePath = basePathRep + '/' + filename
    }
    return filePath
}

// 获取文件扩展名
function getBaseExtension (fileType) {
    if (fileType === 'video/x-ms-wmv') {
        fileType = 'video/wmv' // 对wmv格式的视频文件进行处理
    }
    return fileType.split('/')[1]
}

/**
 * 生成36位 uuid
 * @returns {string} uuid
 */
function getUuid () {
    let s = []
    var hexDigits = '0123456789abcdefhijkmnprstwxyz'
    for (let i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
    }
    return s.join('')
}

/**
 * 格式化
 * @param str 要格式化的字符串
 * @returns {string}
 */
function replace (str) {
    let replacedStr = str
    let length = replacedStr.length
    if (str.indexOf('/') === 0) {
        if (length === 1) {
            replacedStr = ''
        } else {
            replacedStr = str.substring(1, length)
        }
        length -= 1
    }
    if (length - 1 === replacedStr.lastIndexOf('/')) {
        replacedStr = replacedStr.substring(0, length - 1)
    }
    return replacedStr
}

// 对外接口对象封装
let uploadOss = {
    imgPath: '',
    // file文件上传
    fileInit: function (file, basePath, changeSize, callbackImg) {
        let filePath = getFilePath(file, basePath)
        getPolicy(file, filePath, changeSize, callbackImg)
    }
}

export default uploadOss

© 著作权归作者所有

放开那个女孩
粉丝 4
博文 112
码字总数 43124
作品 0
杭州
程序员
私信 提问
整合百度UEditor上传图片到阿里云OSS

前言 将图片上传到阿里云OSS是一种趋势,一个必然。当你的项目图片过多,需要频繁上传和替换的时候,用阿里云OSS可以很方便的管理你的图片,节省服务器空间,大大提高了效率。阿里云OSS是阿里...

zacklee
2017/09/17
0
0
ossutil命令上传文件到阿里云oss详解,使用Shell脚本实现数据的自动上传下载Bucket对象存储

版权声明:知识就是为了传播! https://blog.csdn.net/weixin_36171533/article/details/83657732 安装ossutil 测试运行 个人中心找到AK和SK(AccessKey/SecretKey) https://usercenter.con......

JESSE_JAVA
2018/11/02
0
0
对象存储系统 - oss-server

oss-server 对象存储系统(Simple OSS Server) 项目介绍 oss-server是针对项目开发时提供的小型对象存储系统,开发者在针对文件上传时业务剥离,同时方便文件迁移,为满足单个项目,多个系统的情...

八一菜刀
2018/06/13
0
0
基于nuxt和iview搭建OM后台管理系统实践(3)-阿里oss上传组件的封装

目录结构 这是《基于nuxt和iview搭建OM后台管理系统实践》这一个系列文章的目录,大致思路如下: 简要介绍OM后台管理系统,以及开发环境 自行开发的公共组件,富文本quill[已完成]、地图、上...

愿爱无忧dk_
2018/06/12
0
0
如何使用云存储来存取及优化图片资源

在日常开发中,不免会遇到需要实现图片上传与展示的需求。比如一个文章发布系统,我们通常会开发图片上传功能,让用户可以为自己的文章提供配图;而且图片上传后,还需要生成不同尺寸的缩略图...

一斤代码
2018/09/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

最开始学习素描的步骤是什么?

最开始学习素描的步骤是什么?很多学画画的朋友们都会问直接跳过素描不学素描行不行,小编非常的肯定告诉你不行,素描是所以绘画类的基础,台阶是一层一层筑起的,目前的现实是未来理想的基础...

设绘嗨
24分钟前
1
0
Caused by: java.lang.ClassCastException: scala.collection.mutable.WrappedArray

code val linkPairSum = F.udf( (list:List[Map[Long,Int]]) => { var map = Map[Long,Int]() for(m <- list){ if(m != null){ ......

张欢19933
24分钟前
1
0
git常见问题

一、clone代码 clone 1.登录账号密码不对 fatal: Authentication failed for 2.权限不足 Permission denied (publickey) 或者emote: User permission denied fatal: unable to access u......

hexiaoming123
34分钟前
1
0
Mybatis操作mysql 8的Json字段类型

Json字段是从mysql 5.7起加进来的全新的字段类型,现在我们看看在什么情况下使用该字段类型,以及用mybatis如何操作该字段类型 一般来说,在不知道字段的具体数量的时候,使用该字段是非常合...

算法之名
42分钟前
37
0
Windows7至Windows10的升级建议

目前,诸多企业或已开始在进行Windows7至Windows10的升级,或正在规划Windows7升级至Windows10。 主要原因有两个: Windows7的生命周期即将结束,这意味着再也无法获取Windows7的安全更新,以...

嘉为科技
45分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部