Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
S
self-support
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
李俊赕
self-support
Commits
82458758
Commit
82458758
authored
Apr 13, 2021
by
李俊赕
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
图片上传每次上传只发送一次token获取0.0.5
parent
add79579
Changes
5
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
82 additions
and
127 deletions
+82
-127
index.js
src/components/upload/index.js
+31
-103
file-upload.vue
src/pages/settle/file-upload.vue
+2
-2
index.js
src/plugins/uploader/index.js
+38
-15
upload.js
src/plugins/uploader/request/upload/upload.js
+7
-1
utils.js
src/plugins/uploader/request/upload/utils.js
+4
-6
No files found.
src/components/upload/index.js
View file @
82458758
import
uploader
from
'@/plugins/uploader/index.js'
const
globalUrl
=
process
.
uniEnv
||
{}
export
default
{
name
:
'
qiniup
'
,
name
:
'
upload
'
,
components
:
{},
data
()
{
return
{
...
...
@@ -13,116 +13,44 @@ export default {
uploadToken
:
''
,
// 上传token
maximum
:
999
,
// 最大上传数量
qiniuOptions
:
{},
// 七牛上传配置
imgList
:[]
};
},
created
()
{
console
.
log
(
uploader
,
'uploader'
)
// this.initQiniu()
},
methods
:
{
async
chooseImage
(){
let
res
=
await
uploader
.
qnImgUpload
()
console
.
log
(
res
,
'res--------qnImgUpload'
)
},
initQiniu
:
function
()
{
var
defaulfs
=
{
// bucket所在区域,这里是华北区。ECN, SCN, NCN, NA, ASG,分别对应七牛云的:华东,华南,华北,北美,新加坡 5 个区域
region
:
'ECN'
,
bucket
:
'fa-cms'
,
qiniuBucketURLPrefix
:
'uploads'
,
// 获取uptoken方法三选一即可,执行优先级为:uptoken > uptokenURL > uptokenFunc。三选一,剩下两个置空。推荐使用uptokenURL,详情请见 README.md
// 由其他程序生成七牛云uptoken,然后直接写入uptoken
uptoken
:
''
,
// 从指定 url 通过 HTTP GET 获取 uptoken,返回的格式必须是 json 且包含 uptoken 字段,例如: {"uptoken": "0MLvWPnyy..."}
uptokenURL
:
this
.
uptokenURL
,
// uptokenFunc 这个属性的值可以是一个用来生成uptoken的函数,详情请见 README.md
uptokenFunc
:
function
()
{
},
// bucket 外链域名,下载资源时用到。如果设置,会在 success callback 的 res 参数加上可以直接使用的 fileURL 字段。否则需要自己拼接
domain
:
this
.
domain
,
// qiniuShouldUseQiniuFileName 如果是 true,则文件的 key 由 qiniu 服务器分配(全局去重)。如果是 false,则文件的 key 使用微信自动生成的 filename。出于初代sdk用户升级后兼容问题的考虑,默认是 false。
// 微信自动生成的 filename较长,导致fileURL较长。推荐使用{qiniuShouldUseQiniuFileName: true} + "通过fileURL下载文件时,自定义下载名" 的组合方式。
// 自定义上传key 需要两个条件:1. 此处shouldUseQiniuFileName值为false。 2. 通过修改qiniuUploader.upload方法传入的options参数,可以进行自定义key。(请不要直接在sdk中修改options参数,修改方法请见demo的index.js)
// 通过fileURL下载文件时,自定义下载名,请参考:七牛云“对象存储 > 产品手册 > 下载资源 > 下载设置 > 自定义资源下载名”(https://developer.qiniu.com/kodo/manual/1659/download-setting)。本sdk在README.md的"常见问题"板块中,有"通过fileURL下载文件时,自定义下载名"使用样例。
shouldUseQiniuFileName
:
true
};
let
options
=
{}
if
(
Object
.
keys
(
this
.
qiniuOptions
).
length
)
{
Object
.
assign
(
options
,
defaulfs
,
this
.
qiniuOptions
);
}
else
{
options
=
defaulfs
;
methods
:
{
async
chooseImage
(
type
){
let
imageList
=
[]
if
(
type
===
'qiniu'
){
// 七牛上传
let
res
=
await
uploader
.
qnImgUpload
()
console
.
log
(
res
,
'res--------qnImgUpload'
)
// res.map(item=>{
// imageList.push()
// })
this
.
imgList
=
res
return
}
// 将七牛云相关配置初始化进本sdk
qiniuUploader
.
init
(
options
);
// 本地服务上传
let
res
=
await
uploader
.
urlUpload
()
this
.
imgList
=
res
},
getUrlKey
(
file
)
{
let
index
=
file
.
lastIndexOf
(
'/'
);
let
len
=
file
.
length
let
name
=
file
.
substring
(
index
+
1
,
len
)
return
name
;
perviewImg
(
index
)
{
let
urls
=
[]
this
.
imgList
.
map
(
item
=>
{
urls
.
push
(
item
.
src
)
})
uni
.
previewImage
({
current
:
index
,
urls
:
urls
});
},
/**
* 确认上传
* @param {boolean} submit
*/
confirmUpload
(
submit
=
false
)
{
let
self
=
this
const
fileList
=
self
.
files
if
(
self
.
maximum
-
fileList
.
length
<=
0
)
{
uni
.
showToast
({
title
:
'图片数量不能大于'
+
self
.
maximum
,
icon
:
'none'
})
return
}
for
(
let
file
of
fileList
)
{
let
name
=
self
.
getUrlKey
(
file
)
// 交给七牛上传
let
item
=
{
src
:
''
,
id
:
''
,
key
:
''
,
// filesize: '',
progress
:
0
}
const
params
=
{
name
:
name
,
file
:
file
,
}
qiniuUploader
.
upload
(
params
,
(
res
)
=>
{
console
.
log
(
res
,
'res'
)
let
inLen
=
self
.
maximum
-
fileList
.
length
if
(
inLen
>
0
)
{
item
.
src
=
file
item
.
key
=
res
.
key
||
res
.
src
self
.
fileMaps
.
push
(
item
);
self
.
keys
.
push
(
item
.
key
)
if
(
submit
)
{
self
.
submitFile
()
}
}
else
{
uni
.
showToast
({
title
:
'图片数量不能大于9'
})
}
},
(
error
)
=>
{
console
.
log
(
'error: '
+
error
);
},
null
,
(
res
)
=>
{
item
.
progress
=
res
.
progress
},
()
=>
{
// 取消上传
},
()
=>
{
// `before` 上传前执行的操作
},
(
err
)
=>
{
// `complete` 上传接受后执行的操作(无论成功还是失败都执行)
});
}
}
removeImg
(
index
)
{
this
.
imgList
.
splice
(
index
,
1
)
// this.$emit('image-change', this.imgList) //将图片回传父页面
},
}
}
src/pages/settle/file-upload.vue
View file @
82458758
...
...
@@ -5,14 +5,14 @@
<!--
<view
class=
"tip-sucess u-flex u-row-center"
v-if=
"file && (file.status == status.QUEUED || file.status == status.UPLOADING)"
>
<span>
正在上传中...
{{
file
.
percent
}}
%
</span>
</view>
-->
<img
:src=
"file
.src
"
mode=
"aspectFill"
@
click=
"perviewImg(index)"
>
<img
:src=
"file"
mode=
"aspectFill"
@
click=
"perviewImg(index)"
>
<view
class=
"close"
@
click=
"removeImg(index)"
>
<u-icon
name=
"close"
color=
"#fff"
size=
"20"
></u-icon>
</view>
</view>
<view>
<view
class=
"pic upload"
@
click=
"chooseImage"
>
<view
class=
"pic upload"
@
click=
"chooseImage
('qiniu')
"
>
<u-icon
name=
"camera"
color=
"#fff"
size=
"100"
></u-icon>
<span
class=
"txt"
>
点击拍摄
</span>
</view>
...
...
src/plugins/uploader/index.js
View file @
82458758
...
...
@@ -30,21 +30,44 @@ let uploader = new request(baseOptions);
uploader
.
getQnToken
=
function
(
callback
)
{
//该地址需要开发者自行配置(每个后台的接口风格都不一样)
// console.log(uploader.get,'uploader.get')
uploader
.
post
(
baseOptions
.
qiniuUploadUrl
).
then
(
data
=>
{
/*
*接口返回参数:
*visitPrefix:访问文件的域名
*token:七牛云上传token
*folderPath:上传的文件夹
*region: 地区 默认为:ECN
*/
callback
({
visitPrefix
:
data
.
visitPrefix
||
''
,
token
:
data
.
token
||
''
,
folderPath
:
data
.
folderPath
||
''
,
region
:
"ECN"
});
});
return
new
Promise
((
resolve
,
reject
)
=>
{
uploader
.
post
(
baseOptions
.
qiniuUploadUrl
).
then
(
data
=>
{
/*
*接口返回参数:
*visitPrefix:访问文件的域名
*token:七牛云上传token
*folderPath:上传的文件夹
*region: 地区 默认为:ECN
*/
resolve
({
visitPrefix
:
data
.
host
||
''
,
token
:
data
.
token
||
''
,
folderPath
:
data
.
folderPath
||
''
,
region
:
"ECN"
})
}).
catch
(()
=>
{
let
err
=
{
statusCode
:
0
,
errMsg
:
"【request】token获取失败"
}
reject
(
err
)
})
})
// uploader.post(baseOptions.qiniuUploadUrl).then(data => {
// /*
// *接口返回参数:
// *visitPrefix:访问文件的域名
// *token:七牛云上传token
// *folderPath:上传的文件夹
// *region: 地区 默认为:ECN
// */
// callback({
// visitPrefix: data.host || '',
// token: data.token || '',
// folderPath: data.folderPath || '',
// region: "ECN"
// });
// });
}
//当前接口请求数
...
...
src/plugins/uploader/request/upload/upload.js
View file @
82458758
...
...
@@ -12,6 +12,7 @@ export default class fileUpload extends request {
constructor
(
props
)
{
// 调用实现父类的构造函数
super
(
props
);
this
.
qiniuTokenObj
=
null
}
//七牛云上传图片
async
qnImgUpload
(
options
=
{})
{
...
...
@@ -80,7 +81,12 @@ export default class fileUpload extends request {
}
}
}
let
requestResult
=
await
qiniuUpload
(
requestInfo
,
this
.
getQnToken
);
let
qnRes
=
this
.
qiniuTokenObj
if
(
!
qnRes
){
qnRes
=
await
this
.
getQnToken
()
this
.
qiniuTokenObj
=
qnRes
}
let
requestResult
=
await
qiniuUpload
(
requestInfo
,
qnRes
);
return
Promise
.
resolve
(
requestResult
);
}
catch
(
err
)
{
this
.
requestError
&&
this
.
requestError
(
err
);
...
...
src/plugins/uploader/request/upload/utils.js
View file @
82458758
...
...
@@ -68,15 +68,13 @@ export const chooseVideo = function(data) {
});
}
// 七牛云上传
export
const
qiniuUpload
=
function
(
requestInfo
,
getQnToken
)
{
export
const
qiniuUpload
=
function
(
requestInfo
,
qnRes
)
{
return
new
Promise
((
resolve
,
reject
)
=>
{
if
(
Array
.
isArray
(
requestInfo
.
files
))
{
let
len
=
requestInfo
.
files
.
length
;
let
fileList
=
new
Array
;
if
(
getQnToken
)
{
console
.
log
(
getQnToken
,
'getQnToken'
)
getQnToken
(
qnRes
=>
{
console
.
log
(
qnRes
,
'qnRes'
)
if
(
qnRes
)
{
// getQnToken(qnRes => {
/*
*接口返回参数:
*visitPrefix:访问文件的域名
...
...
@@ -132,7 +130,7 @@ export const qiniuUpload = function(requestInfo, getQnToken) {
// console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
});
}
});
//
});
}
else
{
reject
({
errMsg
:
"请添加七牛云回调方法:getQnToken"
,
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment