oss 直传对象存储
'use strict'
import Utils from './utils'
import { getSign, analysisCover } from '@/api/oss'
import { Message } from 'element-ui'
import axios from 'axios'
export default {
/**
* 创建随机字符串
* @param num
* @returns {string}
*/
randomString(num) {
const chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']
let res = ''
for (let i = 0; i < num; i++) {
var id = Math.ceil(Math.random() * 35)
res += chars[id]
}
return res
},
/**
* 创建oss客户端对象
* @returns {*}
*/
createOssClient(sign) {
return new Promise((resolve, reject) => {
// eslint-disable-next-line no-undef
const client = new OSS({
region: 'oss-cn-hangzhou',
accessKeyId: '*',
accessKeySecret: '*',
bucket: '*'
})
resolve(client)
})
},
/**
* 文件上传
* @param option 参考csdn: https://blog.csdn.net/qq_27626333/article/details/81463139
*/
ossUploadFile: function({ option, type }) {
const file = option.file
const extensionName = file.name.substr(file.name.lastIndexOf('.')) // 文件扩展名
var query = { module: type }
getSign(query).then(response => {
if (response.ok === true) {
const sign = response.data
const dateTime = Utils.dateFormat(new Date(), 'yyyyMMddhhmmss') // 当前时间
const randomStr = this.randomString(4)// 4位随机字符串
const fileName = sign.dir + '/' + dateTime + '_' + randomStr + extensionName // 文件名字（相对于根目录的路径 + 文件名）
const name = file.name // 获取图片的名称
const param = new FormData()
param.append('key', fileName) // 存储到oss的图片名称 自己定，必须确保唯一性，不然会覆盖oss中原有的文件
param.append('policy', sign.policy) // 服务器提供 policy
param.append('OSSAccessKeyId', sign.accessid) // 服务器提供 access_id
param.append('success_action_status', 200)
param.append('callback', sign.callback) // oss服务端的回调，服务器提供
param.append('callback_var', sign.callbackVar) // oss服务端的回调，服务器提供
param.append('signature', sign.signature) // 这个就是签名，最关键的，服务器提供
param.append('file', file, name) // 这个切记一定要放到最后去 append ，不然阿里云会一直报 key 的错误
const CancelToken = axios.CancelToken
const source = CancelToken.source()
axios({
url: sign.host,
method: 'post',
onUploadProgress: function(progressEvent) { // 原生获取上传进度的事件
if (progressEvent.lengthComputable) {
progressEvent.cancelSource = source
// 属性lengthComputable主要表明总共需要完成的工作量和已经完成的工作是否可以被测量
// 如果lengthComputable为false，就获取不到progressEvent.total和progressEvent.loaded
option.onProgress(progressEvent)
}
},
data: param,
cancelToken: source.token
}).then(res => {
res.url = sign.host + '/' + fileName
option.onSuccess(res)
}).catch(error => {
if (error) {
option.onError(error)
}
})
} else {
option.onError(response)
}
})
},
// 转化 base64 为 blob
dataURItoBlob: (dataURI) => {
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0] // mime类型
var byteString = atob(dataURI.split(',')[1]) // base64 解码
var arrayBuffer = new ArrayBuffer(byteString.length) // 创建缓冲数组
var intArray = new Uint8Array(arrayBuffer) // 创建视图
for (var i = 0; i < byteString.length; i++) {
intArray[i] = byteString.charCodeAt(i)
}
return new Blob([intArray], { type: mimeString })
},
ossSimpleUpload({ type, file, okCallback, errCallback }) {
if (file.name != null) {
var that = this
const extensionName = file.name.substr(file.name.lastIndexOf('.')) // 文件扩展名
var query = { module: type }
getSign(query).then(response => {
if (response.ok === true) {
const sign = response.data
const dateTime = Utils.dateFormat(new Date(), 'yyyyMMddhhmmss') // 当前时间
const randomStr = that.randomString(4)// 4位随机字符串
const fileName = sign.dir + '/' + dateTime + '_' + randomStr + extensionName // 文件名字（相对于根目录的路径 + 文件名）
const name = file.name // 获取图片的名称
const param = new FormData()
param.append('key', fileName) // 存储到oss的图片名称 自己定，必须确保唯一性，不然会覆盖oss中原有的文件
param.append('policy', sign.policy) // 服务器提供 policy
param.append('OSSAccessKeyId', sign.accessid) // 服务器提供 access_id
param.append('success_action_status', 200)
param.append('callback', sign.callback) // oss服务端的回调，服务器提供
param.append('callback_var', sign.callbackVar) // oss服务端的回调，服务器提供
param.append('signature', sign.signature) // 这个就是签名，最关键的，服务器提供
param.append('file', file, name) // 这个切记一定要放到最后去 append ，不然阿里云会一直报 key 的错误
const CancelToken = axios.CancelToken
const source = CancelToken.source()
axios({
url: sign.host,
method: 'post',
onUploadProgress: function(progressEvent) { // 原生获取上传进度的事件
if (progressEvent.lengthComputable) {
// 将取消上传事件返回
progressEvent.cancelSource = source
// 属性lengthComputable主要表明总共需要完成的工作量和已经完成的工作是否可以被测量
// 如果lengthComputable为false，就获取不到progressEvent.total和progressEvent.loaded
file.onProgress(progressEvent)
}
},
data: param,
cancelToken: source.token
}).then(res => {
res.url = sign.host + '/' + fileName
if (okCallback) okCallback(res)
}).catch(error => {
if (error) {
if (errCallback) {
console.log(error)
if (error.message.code !== 30002) {
Message({
type: 'error',
message: 'oss 服务发生异常，请反馈给管理员！'
})
}
errCallback()
} else {
console.warn(`上传文件到阿里云 OSS 发生错误：${error}`)
}
}
})
} else {
if (errCallback) errCallback()
}
})
} else {
return false
}
},
analysisCoverAli: function(filePath) {
analysisCover(filePath)
}
}
Last updated