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
7c9cc916
Commit
7c9cc916
authored
May 17, 2021
by
Damon
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
图片队列使用临时路径
parent
cfe977aa
Changes
6
Expand all
Hide whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
450 additions
and
446 deletions
+450
-446
.env.js
.env.js
+1
-1
App.vue
src/App.vue
+1
-1
XhFiles.vue
src/components/createCom/XhFiles.vue
+267
-267
preview.vue
src/components/photo/preview.vue
+0
-1
index.js
src/components/upload/index.js
+180
-175
task.js
src/components/upload/task.js
+1
-1
No files found.
.env.js
View file @
7c9cc916
...
...
@@ -15,7 +15,7 @@
}
if
(
ENV_VAR
)
{
process
.
uniEnv
=
{};
process
.
uniEnv
[
'node_env'
]
=
NODE_ENV
;
process
.
uniEnv
[
'node_env'
]
=
NODE_ENV
;
for
(
let
key
in
ENV_VAR
)
{
process
.
uniEnv
[
key
]
=
ENV_VAR
[
key
];
}
...
...
src/App.vue
View file @
7c9cc916
...
...
@@ -77,7 +77,7 @@ export default {
// 系统自动登录::每次运行小程序重新获取用户信息
await
this
.
autoLogin
();
this
.
deleteTempImg
()
//
this.deleteTempImg()
},
onShow
:
async
function
()
{
// 应用启动,或从后台进入前台显示
...
...
src/components/createCom/XhFiles.vue
View file @
7c9cc916
This diff is collapsed.
Click to expand it.
src/components/photo/preview.vue
View file @
7c9cc916
...
...
@@ -87,7 +87,6 @@
if
(
photo
.
tempPath
.
mixWater
){
// 保存水印处理图片到本地
path
=
photo
.
tempPath
.
mixWater
console
.
log
(
"path"
,
path
)
let
result1
=
await
this
.
saveLocal
(
path
)
if
(
result1
){
uni
.
showToast
({
...
...
src/components/upload/index.js
View file @
7c9cc916
import
uploader
from
'@/plugins/uploader/index.js'
const
globalUrl
=
process
.
uniEnv
||
{}
const
randomChar
=
function
(
l
,
url
=
""
)
{
const
x
=
"0123456789qwertyuioplkjhgfdsazxcvbnm"
;
let
tmp
=
""
;
let
time
=
new
Date
();
for
(
let
i
=
0
;
i
<
l
;
i
++
)
{
tmp
+=
x
.
charAt
(
Math
.
ceil
(
Math
.
random
()
*
100000000
)
%
x
.
length
);
}
return
(
"file/"
+
url
+
time
.
getTime
()
+
tmp
);
}
export
default
{
name
:
'upload'
,
components
:
{},
data
()
{
return
{
imgList
:[],
// 上传文件种类:0--头像、1--证件、2--身份证
categories
:
[
'avatar'
,
'cert'
,
'id'
],
};
},
created
()
{
// this.initQiniu()
},
methods
:
{
async
uploadPath
(
type
){
// 可以直接上传path
const
self
=
this
let
imgList
=
[]
let
options
=
{
files
:[]
// 文件路径
}
if
(
type
===
'qiniu'
){
let
res
=
await
uploader
.
qnFileUpload
(
options
)
return
}
let
res
=
await
uploader
.
urlFileUpload
(
options
)
},
/**
* 存储图片到任务队列
* @param {Array} files 图片路径
*/
async
saveToTask
(
files
)
{
// 生成key返回,然后把key放到异步上传的任务队列
let
lists
=
[]
for
(
let
i
=
0
;
i
<
files
.
length
;
i
++
)
{
const
path
=
files
[
i
]
const
row
=
await
this
.
saveFiles
(
path
)
lists
.
push
(
row
)
}
const
data
=
this
.
uploadTask
const
saveLists
=
data
.
concat
(
lists
)
this
.
$u
.
vuex
(
'uploadTask'
,
saveLists
)
return
lists
},
/**
* 选择图片
* @param {Object} data option
*/
async
chooseImg
(
data
){
const
self
=
this
return
new
Promise
((
resolve
,
reject
)
=>
{
uni
.
chooseImage
({
count
:
data
.
count
||
9
,
//默认9
sizeType
:
data
.
sizeType
||
[
'original'
,
'compressed'
],
//可以指定是原图还是压缩图,默认二者都有
sourceType
:
data
.
sourceType
||
[
'album'
,
'camera'
],
//从相册选择
success
:
function
(
res
)
{
const
lists
=
self
.
saveToTask
(
res
.
tempFilePaths
)
resolve
(
lists
)
},
fail
:
err
=>
{
console
.
log
(
"err"
,
err
)
}
})
})
},
// 保存图片到本地
saveFiles
(
path
)
{
return
new
Promise
((
resolve
,
reject
)
=>
{
uni
.
saveFile
({
tempFilePath
:
path
,
success
(
e
)
{
const
{
savedFilePath
}
=
e
const
img
=
{
key
:
randomChar
(
10
),
path
:
savedFilePath
,
src
:
''
}
resolve
(
img
)
},
fail
:
reject
})
})
},
/**
* 上传图片公用组件
* @param {Object} type 文件上传方式
* @param {Object} attr 文件属性:图片种类[category](身份证、证件、头像);
* 图片上传其他配置[options】(如,选择图片或拍摄options.consourceType,['album', 'camera'];)其他
*/
async
chooseImage
(
type
,
attr
=
{}){
const
self
=
this
let
imgList
=
[]
if
(
type
===
'qiniu'
){
// 图片种类
let
category
=
attr
&&
attr
.
category
||
self
.
categories
[
0
]
let
config
=
attr
&&
attr
.
options
||
{}
// 图片上传参数配置
// 七牛上传
let
options
=
{
onProgressUpdate
(
res
){
let
item
=
{
path
:
res
.
path
,
// 图片临时缓存路径
key
:
''
,
// 图片上传成功后相对路径
src
:
''
,
// 访问图片的绝对路径
progress
:
res
.
progress
// 图片上传进度
}
if
(
res
.
fileIndex
<
imgList
.
length
){
imgList
[
res
.
fileIndex
].
progress
=
res
.
progress
}
else
{
imgList
.
push
(
item
)
}
imgList
[
res
.
fileIndex
]
self
.
imgList
=
imgList
// 多文件上传每个文件进度条
},
onEachUpdate
(
res
){
// 多文件上传每个文件上传成功触发
if
(
imgList
.
length
>
res
.
fileIndex
){
imgList
[
res
.
fileIndex
].
key
=
res
.
url
imgList
[
res
.
fileIndex
].
src
=
uploader
.
qiniuTokenObj
.
visitPrefix
+
res
.
url
}
self
.
imgList
=
imgList
},
cardType
:
category
,
...
config
}
// 不需要进度条等可直接获取
let
res
=
await
uploader
.
qnImgUpload
(
options
)
// let imgList = res.map(item=>{
// return {
// key:item,
// src:uploader.qiniuTokenObj.visitPrefix + item
// }
// })
// this.imgList = imgList
return
}
// 本地服务上传
let
res
=
await
uploader
.
urlUpload
()
this
.
imgList
=
res
},
perviewImg
(
index
)
{
let
urls
=
[]
this
.
imgList
.
map
(
item
=>
{
urls
.
push
(
item
.
src
)
})
uni
.
previewImage
({
current
:
index
,
urls
:
urls
});
},
removeImg
(
index
)
{
this
.
imgList
.
splice
(
index
,
1
)
// this.$emit('image-change', this.imgList) //将图片回传父页面
},
}
}
import
uploader
from
'@/plugins/uploader/index.js'
const
globalUrl
=
process
.
uniEnv
||
{}
const
randomChar
=
function
(
l
,
url
=
""
)
{
const
x
=
"0123456789qwertyuioplkjhgfdsazxcvbnm"
;
let
tmp
=
""
;
let
time
=
new
Date
();
for
(
let
i
=
0
;
i
<
l
;
i
++
)
{
tmp
+=
x
.
charAt
(
Math
.
ceil
(
Math
.
random
()
*
100000000
)
%
x
.
length
);
}
return
(
"file/"
+
url
+
time
.
getTime
()
+
tmp
);
}
export
default
{
name
:
'upload'
,
components
:
{},
data
()
{
return
{
imgList
:[],
// 上传文件种类:0--头像、1--证件、2--身份证
categories
:
[
'avatar'
,
'cert'
,
'id'
],
};
},
created
()
{
// this.initQiniu()
},
methods
:
{
async
uploadPath
(
type
){
// 可以直接上传path
const
self
=
this
let
imgList
=
[]
let
options
=
{
files
:[]
// 文件路径
}
if
(
type
===
'qiniu'
){
let
res
=
await
uploader
.
qnFileUpload
(
options
)
return
}
let
res
=
await
uploader
.
urlFileUpload
(
options
)
},
/**
* 存储图片到任务队列
* @param {Array} files 图片路径
*/
async
saveToTask
(
files
)
{
// 生成key返回,然后把key放到异步上传的任务队列
let
lists
=
files
.
map
(
v
=>
{
return
{
key
:
randomChar
(
10
),
path
:
v
,
src
:
''
}
})
// for (let i = 0; i < files.length; i++) {
// const path = files[i]
// const row = await this.saveFiles(path)
// lists.push(row)
// }
const
data
=
this
.
uploadTask
const
saveLists
=
data
.
concat
(
lists
)
this
.
$u
.
vuex
(
'uploadTask'
,
saveLists
)
return
lists
},
/**
* 选择图片
* @param {Object} data option
*/
async
chooseImg
(
data
){
const
self
=
this
return
new
Promise
((
resolve
,
reject
)
=>
{
uni
.
chooseImage
({
count
:
data
.
count
||
9
,
//默认9
sizeType
:
data
.
sizeType
||
[
'original'
,
'compressed'
],
//可以指定是原图还是压缩图,默认二者都有
sourceType
:
data
.
sourceType
||
[
'album'
,
'camera'
],
//从相册选择
success
:
function
(
res
)
{
const
lists
=
self
.
saveToTask
(
res
.
tempFilePaths
)
resolve
(
lists
)
},
fail
:
err
=>
{
console
.
log
(
"err"
,
err
)
}
})
})
},
// 保存图片到本地
saveFiles
(
path
)
{
return
new
Promise
((
resolve
,
reject
)
=>
{
uni
.
saveFile
({
tempFilePath
:
path
,
success
(
e
)
{
const
{
savedFilePath
}
=
e
const
img
=
{
key
:
randomChar
(
10
),
path
:
savedFilePath
,
src
:
''
}
resolve
(
img
)
},
fail
:
reject
})
})
},
/**
* 上传图片公用组件
* @param {Object} type 文件上传方式
* @param {Object} attr 文件属性:图片种类[category](身份证、证件、头像);
* 图片上传其他配置[options】(如,选择图片或拍摄options.consourceType,['album', 'camera'];)其他
*/
async
chooseImage
(
type
,
attr
=
{}){
const
self
=
this
let
imgList
=
[]
if
(
type
===
'qiniu'
){
// 图片种类
let
category
=
attr
&&
attr
.
category
||
self
.
categories
[
0
]
let
config
=
attr
&&
attr
.
options
||
{}
// 图片上传参数配置
// 七牛上传
let
options
=
{
onProgressUpdate
(
res
){
let
item
=
{
path
:
res
.
path
,
// 图片临时缓存路径
key
:
''
,
// 图片上传成功后相对路径
src
:
''
,
// 访问图片的绝对路径
progress
:
res
.
progress
// 图片上传进度
}
if
(
res
.
fileIndex
<
imgList
.
length
){
imgList
[
res
.
fileIndex
].
progress
=
res
.
progress
}
else
{
imgList
.
push
(
item
)
}
imgList
[
res
.
fileIndex
]
self
.
imgList
=
imgList
// 多文件上传每个文件进度条
},
onEachUpdate
(
res
){
// 多文件上传每个文件上传成功触发
if
(
imgList
.
length
>
res
.
fileIndex
){
imgList
[
res
.
fileIndex
].
key
=
res
.
url
imgList
[
res
.
fileIndex
].
src
=
uploader
.
qiniuTokenObj
.
visitPrefix
+
res
.
url
}
self
.
imgList
=
imgList
},
cardType
:
category
,
...
config
}
// 不需要进度条等可直接获取
let
res
=
await
uploader
.
qnImgUpload
(
options
)
// let imgList = res.map(item=>{
// return {
// key:item,
// src:uploader.qiniuTokenObj.visitPrefix + item
// }
// })
// this.imgList = imgList
return
}
// 本地服务上传
let
res
=
await
uploader
.
urlUpload
()
this
.
imgList
=
res
},
perviewImg
(
index
)
{
let
urls
=
[]
this
.
imgList
.
map
(
item
=>
{
urls
.
push
(
item
.
src
)
})
uni
.
previewImage
({
current
:
index
,
urls
:
urls
});
},
removeImg
(
index
)
{
this
.
imgList
.
splice
(
index
,
1
)
// this.$emit('image-change', this.imgList) //将图片回传父页面
},
}
}
src/components/upload/task.js
View file @
7c9cc916
...
...
@@ -32,7 +32,7 @@ export default {
}
})
uni
.
setStorageSync
(
'delImg'
,
delImg
)
// 已上传完的图片,会在启动系统的时候做一次清理
//
uni.setStorageSync('delImg', delImg) // 已上传完的图片,会在启动系统的时候做一次清理
that
.
$u
.
vuex
(
'uploadTask'
,
newTask
)
}
...
...
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