1.安裝ali-oss
npm install ali-oss
- 引入ali-oss
let OSS = require('ali-oss');
3.upload組件上傳兩種方式
*注:阿里云服務器需配置跨域, API為后臺獲取簽名接口
//分片上傳
imgChange (file, fileList) {
let that = this
let storeAs = 'upload-file' + '/' + file.name
OSS.urllib.request("API", { method: 'GET' }, (err, response) => {
if (err) {
return alert(err);
}
let result = JSON.parse(response);
let client = new OSS({
accessKeyId: result.data.accessKeyId,
accessKeySecret: result.data.accessKeySecret,
stsToken: result.data.securityToken,
// region表示您申請OSS服務所在的地域,例如oss-cn-hangzhou。
// bucket文件保存路徑
region: 'oss-cn-chengdu',
bucket: 'liangchuang'
});
// storeAs可以自定義為文件名(例如file.txt)或目錄(例如abc/test/file.txt)的形式,實現將文件上傳至當前Bucket或Bucket下的指定目錄。
// file可以自定義為File對象、Blob數據以及OSS Buffer。
// 注意上傳的內容是file.raw,不是file
client.multipartUpload(storeAs, file.raw).then(function (result) {
let url = result.res.requestUrls[0]
let str = url.substr(0, url.indexOf("?"))
that.ruleForm.src = str
if (that.ruleForm.type == 1) {
that.ruleForm.imageUrl = str
} else {
that.ruleForm.videoUrl = str
}
}).catch(function (err) {
console.log(err);
});
});
},
function upload (file, type, size = 300) {
let that = this
if (file.size > 1024 * size) {
Message({
message: '圖片大小不能超過' + size + 'KB,請重新上傳',
type: 'error',
offset: 500
})
return ''
}
return new Promise((resolve, reject) => {
var point = file.raw.name.lastIndexOf(".");
OSS.urllib.request("API", { method: 'GET' }, (err, response) => {//獲取配置信息
if (err) {
return alert(err);
}
let result = JSON.parse(response);//獲取配置
var name = file.raw.name.substr(point);
let cdnDomain = result.data.cdnDomain
let storeAs = result.data.path + '/' + Date.parse(new Date()) + name// 根據type和moduleId拼接目錄和文件名
let client = new OSS({// 阿里云oss配置信息
accessKeyId: result.data.accessKeyId,
accessKeySecret: result.data.accessKeySecret,
stsToken: result.data.securityToken,
region: 'oss-cn-chengdu',
bucket: result.data.bucketName
});
async function putObject () {
try {
let result = await client.put(storeAs, file.raw);
result.cdnDomain = cdnDomain
resolve(result);
} catch (e) {
}
}
putObject();
});
})
}