Vue 将本地图片上传到阿里云
2024-08-30 16:30:14
一、获取服务器通行证(即获取AccessKey和accessKeySecret)
getAccess () {
let that = this
let url = '服务器地址'
let params = {
type: 'K'
}
// 第一步:获取AccessKey
this.$api.send(url, params).then((response) => {
if (response.status === 200) {
that.accessKey = response.body.data.data.Credentials
/* global OSS */
that.client = new OSS.Wrapper({
region: 'oss-cn-shenzhen',
bucket: '阿里云bucket文件夹名',
accessKeyId: that.accessKey.AccessKeyId,
accessKeySecret: that.accessKey.AccessKeySecret,
stsToken: that.accessKey.SecurityToken
})
that.folder = response.body.data.data.folder;
for (let i = 0; i < that.allList.length; i++) {
if (!that.allList[i].hasUpload) {//allList 需要上传的图片数组
(function () { that.uploadItem(that.allList[i], i) })(i) } } } }) }
二、上传到服务器
uploadItem (file, index) {
let that = this
let progress = function (p) {
return function (done) {
done()
}
}
// 命名规则:web+id+10位时间戳+随机4位数
let storeAs = 'web' + that.$user.getAll().userId + Math.round(new Date().getTime() / 1000) + Math.ceil(Math.random() * 100000).toString() + '.' + file.name.split('.')[1]
// 第二步:调用阿里云上传函数上传文件
this.client.multipartUpload(this.folder + '/' + storeAs, file.obj, {
progress: progress
}).then(function (result) {
alert(上传成功)
}).catch(function (err) {
console.log(err)
})
}
this.getUnloadImg()
最新文章
- Android编码规范05
- Hololens 硬件细节 Hardware Detail
- 自学android半年,已从.net转型成android程序员,分享下这个过程
- Install Mono and MonoDevelop on Fedora
- 简单SSM配置详解
- 基于go-ceph创建CEPH块设备及快照
- 百度分享不支持https的解决方案
- IIS7.5 APPCMD 简单用法及示例
- LINQ to Entity Framework 操作符(转)
- Android中的Fragment页面切换和selector选择器
- 数组实现UITabview的cell设置
- jquery 三级关联选择效果
- 图片Ping
- MUI体验框架
- (五十五)iOS多线程之GCD
- python 操作 saltstack Api(二) 示例
- Linux系统模式之间的转换
- linux基础之bash特性
- PHP实现简单下载功能
- ASP.NET Core 应用程序Startup类介绍 (转载)