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