Skip to content

S
self-support
Commit da7916eb authored by Damon's avatar Damon
Browse files
Options

feat: 图片上传进度

parent 27fb0f22
Show whitespace changes
Inline Side-by-side
Showing with 398 additions and 137 deletions
src/components/upload-progress/upload-progress.vue 0 → 100644
View file @ da7916eb
<template>
<view class="upload-progress">
<view :class="['u-flex', 'suspension', {'error': uploadStatus === 3}]" @click="openpRrogress">
<view class="progress" v-if="taskCount > 0">{{ uploadPercentage }}%</view>
<view class="upload-img" v-if="taskCount === 0">
<image class="icon" :src="icon"></image>
</view>
</view>
<u-popup
v-model="open"
border-radius="12"
mode="center"
:animation="false"
@close="closePopup"
width="690rpx">
<view class="slot-content">
<view class="upload-title">
<text class='status-txt'>图片上传进度</text>
</view>
<view v-if="taskCount > 0">
<view class="progress-circle">
<u-loading class="loading" v-if="!progressStatus" mode="circle"></u-loading>
<u-circle-progress v-if="progressStatus" :width="320" :border-width="20" inactive-color="#F4F5F7" :active-color="progressColor" :percent="uploadPercentage">
<view :class="['u-progress-content', {'error': uploadStatus === 3}]"> {{ uploadPercentage }}%</view>
</u-circle-progress>
</view>
<view class="u-flex upload-data">
<view class="u-flex">
<view class="title">需上传</view>
<view class="pending">{{ taskCount }}</view>
</view>
<view class="u-flex">
<view class="title">已上传</view>
<view class="resolve">{{ uploadSuccess }}</view>
</view>
<view class="u-flex">
<view class="title">状态</view>
<view :class="['status', {'error': uploadStatus === 3}]">{{ uploadStatusName }}</view>
</view>
</view>
<view class="upload-bottom" v-if="uploadStatus === 3">
<view class="button confirm" @click="$u.throttle(retry, 500)">重试</view>
</view>
</view>
<view class="u-flex default" v-if="taskCount === 0">
<view><image class="default-img" :src="defaultImg"></image></view>
<view class="text">当前暂无上传图片</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
/**
* upload-progress 图片上传进度
*/
import upload from '@/components/upload/task.js'
export default {
name:"upload-progress",
data() {
return {
open: false,
progressStatus: false
}
},
computed: {
icon() {
return process.uniEnv.qn_base_url + 'upload-photo.png'
},
defaultImg() {
return process.uniEnv.qn_base_url + 'upload-default.png'
},
taskCount() {
return this.uploadTask.length
},
uploadStatusName() {
let status
switch (this.uploadStatus) {
case 1:
status = '等待上传'
break;
case 2:
status = '上传中'
break;
case 3:
status = '上传中断'
break;
}
return status
},
progressColor() {
return this.uploadStatus === 3 ? '#FA5A49' : '#2272FF'
},
uploadPercentage() {
return Number(this.uploadSuccess) / Number(this.uploadTask.length)
}
},
methods: {
closePopup() {
this.progressStatus = false
},
openpRrogress() {
this.open = true
setTimeout(() => {
this.progressStatus = true
}, 300)
},
retry() {
if(this.uploadStatus !== 2) upload.uploadImageTask(this)
}
}
}
</script>
<style lang="scss" scoped>
.upload-progress {
width: 100%;
height: 100%;
.suspension {
position: fixed;
right: 5%;
bottom: 20%;
width: 80rpx;
height: 80rpx;
border-radius: 50%;
background: #2272FF;
&.error {
background: #FA5A49;
}
.progress {
font-size: 24rpx;
color: #fff;
width: 100%;
text-align: center;
}
.upload-img {
width: 100%;
text-align: center;
padding-top: 8rpx;
.icon {
width: 36rpx;
height: 32rpx;
}
}
}
.slot-content {
padding: 40rpx 30rpx 0rpx 30rpx;
.upload-title {
margin: 20rpx 0 50rpx 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.status-txt {
height: 46rpx;
font-size: 40rpx;
font-weight: bold;
color: #333;
line-height: 46rpx;
}
}
.progress-circle {
width: 100%;
height: 320rpx;
text-align: center;
.loading {
line-height: 320rpx;
}
.u-progress-content {
color: #2272FF;
font-size: 60rpx;
&.error {
color: #FA5A49;
}
}
}
.upload-data {
margin: 50rpx 0 30rpx 0;
.u-flex {
flex-flow: column;
font-size: 48rpx;
width: 210rpx;
height: 120rpx;
.title {
color: #666;
font-size: 28rpx;
padding-bottom: 20rpx;
}
.pending {
color: #333;
}
.resolve {
color: #2272FF;
}
.status {
color: #2272FF;
font-size: 36rpx;
&.error {
color: #FA5A49;
}
}
}
}
.upload-bottom {
display: flex;
justify-content: center;
align-items: center;
.button {
text-align: center;
height: 104rpx;
width: 300rpx;
border-radius: 52rpx;
font-size: 32rpx;
font-weight: 600;
line-height: 104rpx;
}
.confirm {
margin: 36rpx 30rpx 52rpx 15rpx;
background: #2272FF;
color: #FFFFFF;
}
}
.default {
flex-flow: column;
margin: 150rpx 0;
.default-img {
width: 360rpx;
height: 240rpx;
}
.text {
color: #666;
font-size: 28rpx;
margin-top: 50rpx;
}
}
}
}
</style>
src/components/upload/task.js
View file @ da7916eb
...@@ -19,6 +19,7 @@ export default { ...@@ -19,6 +19,7 @@ export default {
* 执行任务队列 * 执行任务队列
*/ */
async uploadImageTask(that) { async uploadImageTask(that) {
that.$u.vuex('uploadStatus', 2)
const uploadTask = JSON.parse(JSON.stringify(that.uploadTask)).reverse() const uploadTask = JSON.parse(JSON.stringify(that.uploadTask)).reverse()
const networkType = await getNetworkType() const networkType = await getNetworkType()
const options = { const options = {
...@@ -34,6 +35,8 @@ export default { ...@@ -34,6 +35,8 @@ export default {
} }
delete log.files delete log.files
RUN('upload_photo_success', log) RUN('upload_photo_success', log)
that.$u.vuex('uploadSuccess', that.uploadSuccess++)
}, },
onProgressUpdate: res => { onProgressUpdate: res => {
//console.log("上传进度返回：",res); //console.log("上传进度返回：",res);
...@@ -44,7 +47,7 @@ export default { ...@@ -44,7 +47,7 @@ export default {
this.refreshTask(that, res) this.refreshTask(that, res)
}).catch(err => { }).catch(err => {
console.log("err", err) console.log("err", err)
that.$u.vuex('uploadStatus', 3)
err.mobile = that.vuex_user.mobile err.mobile = that.vuex_user.mobile
if(!err.key) err.files = uploadTask if(!err.key) err.files = uploadTask
if(!err.orderNumber) err.orderNumber = uploadTask[0].orderNumber if(!err.orderNumber) err.orderNumber = uploadTask[0].orderNumber
...@@ -54,6 +57,7 @@ export default { ...@@ -54,6 +57,7 @@ export default {
if (err.errMsg && (err.errMsg.indexOf('fail file not found') !== -1 || err.errMsg.indexOf('file doesn') !== -1)) { // 在任务中删除不存在的图片 if (err.errMsg && (err.errMsg.indexOf('fail file not found') !== -1 || err.errMsg.indexOf('file doesn') !== -1)) { // 在任务中删除不存在的图片
const newTask = uploadTask.filter(v => v.key !== err.key) const newTask = uploadTask.filter(v => v.key !== err.key)
that.$u.vuex('uploadTask', newTask) that.$u.vuex('uploadTask', newTask)
this.resetProgress(that)
} }
}) })
}, },
...@@ -68,5 +72,13 @@ export default { ...@@ -68,5 +72,13 @@ export default {
// uni.setStorageSync('delImg', delImg) // 已上传完的图片，会在启动系统的时候做一次清理 // uni.setStorageSync('delImg', delImg) // 已上传完的图片，会在启动系统的时候做一次清理
that.$u.vuex('uploadTask', newTask) that.$u.vuex('uploadTask', newTask)
this.resetProgress(that)
},
// 重置任务状态
resetProgress(that) {
if (that.uploadTask.length === 0) { // 上传完本地所有照片
that.$u.vuex('uploadSuccess', 0)
that.$u.vuex('uploadStatus', 1)
}
} }
} }
src/pages/index/index.vue
View file @ da7916eb
...@@ -60,6 +60,7 @@ ...@@ -60,6 +60,7 @@
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
<upload-progress></upload-progress>
</TabBarPage> </TabBarPage>
</template> </template>
......
src/store/index.js
View file @ da7916eb
...@@ -12,7 +12,7 @@ try { ...@@ -12,7 +12,7 @@ try {
} }
// 需要永久存储，且下次APP启动需要取出的，在state中的变量名 // 需要永久存储，且下次APP启动需要取出的，在state中的变量名
let saveStateKeys = ['vuex_user', 'vuex_wx_uid', 'vuex_token', 'vuex_cache', 'uploadTask', 'vuex_superuser']; let saveStateKeys = ['vuex_user', 'vuex_wx_uid', 'vuex_token', 'vuex_cache', 'uploadTask', 'uploadSuccess', 'vuex_superuser'];
// 保存变量到本地存储中 // 保存变量到本地存储中
const saveLifeData = function(key, value) { const saveLifeData = function(key, value) {
...@@ -42,7 +42,11 @@ const store = new Vuex.Store({ ...@@ -42,7 +42,11 @@ const store = new Vuex.Store({
// 授权用户信息 // 授权用户信息
vuex_auth_user: {}, vuex_auth_user: {},
// 上传队列 // 上传队列
uploadTask: lifeData.uploadTask ? lifeData.uploadTask : [] uploadTask: lifeData.uploadTask ? lifeData.uploadTask : [],
// 上传状态 1 未开始 2 上传中 3 上传中断
uploadStatus: 1,
// 已上传数量
uploadSuccess: lifeData.uploadSuccess ? lifeData.uploadSuccess : 0,
}, },
mutations: { mutations: {
$uStore(state, payload) { $uStore(state, payload) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment