一、情景摘要
在項目開發中，我們經常會遇到需要上傳附件的需求，如果實際業務場景下只需要上傳少量附件的，上傳到代碼部署的同一臺服務器是沒問題的，但是如果上傳附件的場景非常多，那么同一臺服務器可能就承受不住了，這時就需要一臺專門的文件服務器。我們常用的是阿里云的對象存儲OSS。根據阿里云的OSS官方文檔介紹（參見：https://help.aliyun.com/document_detail/31927.html?spm=a2c4g.11186623.2.17.3fc872c1lzmOdb#concept-qp2-g4y-5db
），有多種方式的直傳方式，本文選取了安全和性能就都比較高的服務端簽名直傳并設置上傳回調的方式，重點講述前端實現。
二、操作流程
1、前端根據后端提供的接口向后端發送請求，獲取文件上傳需要的簽名、Policy和回調等信息。
// 請求api封裝
const baseApi = process.env.NODE_ENV === 'production' ? '/' : '/upload'
import $axios from '@/libs/request'
// 請求方法
export const getSignature = () => {
// $axios.request()為封裝過的專門發送請求的方法
return $axios.request({
url: `${baseApi}/upload/token`,
method: 'GET'
})
}
2、根據請求獲取到的簽名策略信息生成oss上傳需要的表單參數
import {getSignature} from '@/api/api-upload'
let accessid = ''
let policyBase64 = ''
let signature = ''
let callbackbody = ''
let key = ''
let expire = 0
let host = ''
let g_object_name = ''
let now = Date.parse(new Date()) / 1000;
// 生成隨機字符串
function random_string(len) {
len = len || 32;
var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
var maxPos = chars.length;
var pwd = '';
for (let i = 0; i < len; i++) {
pwd += chars.charAt(Math.floor(Math.random() * maxPos));
}
return pwd;
}
// 獲取用戶上傳原始文件名
function get_file_name(filename) {
let pos = filename.lastIndexOf('.')
let suffix = ''
if (pos != -1) {
suffix = filename.substring(pos)
}
return suffix;
}
// 把隨機生成的字符串拼接在原始上傳文件名后面生成新的唯一文件名
function set_file_name(filename) {
let suffix = get_file_name(filename)
g_object_name = key + random_string(10) + suffix
return ''
}
// 獲取后端返回的簽名信息，生成oss參數
function oss(filename = null) {
// 可以判斷當前expire是否超過了當前時間， 如果超過了當前時間， 就重新取一下， 3 s 作為緩沖。
now = Date.parse(new Date()) / 1000;
if (expire < now + 3) {
// 調用后端服務器接口獲取簽名信息，利用axios返回promise，可以鏈式調用
return getSignature().then(res => {
console.log(res)
/* 返回的簽名策略信息包含:
{
accessid: "LTAI*******UPPr", // 用戶請求的accessid
callback: "eyJjYWxs************H0ifQ==", // 回調
dir: "test/file-dir/", // 上傳文件的存儲位置
expire: "1557974779", // 上傳策略Policy失效時間
host: "http://xxxxxxxxx.com", // 上傳文件服務器地址
policy: "eyJleHBp***********6/EMG7U=" ,// 用戶表單上傳的策略（Policy)
signature: "JumJy*****k6/EMG7U=" // 簽名信息
}
*/
policyBase64 = res['policy']
accessid = res['accessid']
signature = res['signature']
expire = parseInt(res['expire'])
callbackbody = res['callback']
host = res['host']
key = res['dir']
if (filename != null) {
set_file_name(filename)
}
// 返回表單上傳需要的參數信息
return {
'host': host,
'key': g_object_name,
'policy': policyBase64,
'OSSAccessKeyId': accessid,
'success_action_status': '200', //讓服務端返回200,不然，默認會返回204
'callback': callbackbody,
'signature': signature,
};
})
}
}
export { oss }
3、配合iView的Upload組件實現上傳
生成上傳的表單參數后，使用任何文件上傳的組件都可以，只需要在提交文件上傳的時候帶上生成的參數即可。這里我們在vue項目中使用iView的Upload組件進行上傳。
<Upload
multiple
type="drag"
:action="uploadHost" // 上傳地址
:data='uploadData' // 上傳攜帶的參數
:before-upload='beforeUpload' // 上傳的鉤子
:on-success="handleSuccess" // 上傳成功后回調
>
<div style="padding: 20px 0" class="handle_upload">
<img src="../../../assets/img/business/upload.png">
<span class="des">點擊將文件拖拽或點擊上傳</span>
</div>
</Upload>
// 引入生成上傳參數方法
import {oss} from '@/libs/uploadFile'
export default{
data() {
// 附件上傳路徑
uploadHost: '',
// 附件上傳攜帶參數
uploadData: {},
// 上傳后返回的存儲的文件名
fileName: '',
// 上傳后返回的文件存儲地址
filePath: ''
},
methods: {
// 在Upload組件的鉤子before-upload中獲取到生成的參數信息
beforeUpload(file) {
return oss(file.name).then(res => {
this.uploadHost = res.host
this.uploadData = res
})
},
// 上傳成功的回調函數
handleSuccess(res, file, fileList) {
console.log(res.data)
/* 上傳成功后，文件服務器會返回上傳文件在oss上存儲位置、文件名及相關信息
{
filename: "test/file-dir/JdzYDhdrtF.jpg"
height: "683"
mimeType: "image/jpeg"
size: "186142"
url: "http://xxxx.xxx.com/test/file-dir/JdzYDhdrtF.jpg"
width: "1024"
}
*
*/
// 根據自己的業務場景，將返回的文件位置信息和其他表單信息一起提交給后端進行業務關聯，在其他地方需要使用附件時可以根據url位置找到上傳的文件
this.fileName: res.data.filename,
this.filePath: res.data.url
}
}
}
至此，一個完整功能的文件上傳到阿里云的OSS已經完成。
