uniapp图片上传封装带上传进度

<template>
<view class="uploadImg">
<view :style="styleCss" class="border-x" v-for="(item,index) in tempFiles" :key="index">
<template v-if="item.isJia">
<view class="line" :style="borderRC" />
<view class="juZhong">
{{item.num}}%
</view>
</template>
<template v-else>
<view class="line" :style="borderRC" />
<image @click.stop="updataImgClick(index,item)" :style="styleCss" :src="item.path" mode="aspectFill">
</image>
<view class="iconfont icon-delete" @click.stop="updataImgDelete(item,index)" />
</template>
</view>

<view :style="styleCss" v-if="addImg(tempFiles.length)" class="border-x" @click="updataImgClick()">
<view class="line" :style="borderRC" />
<slot name="icons">
<view class="iconfont icon-jia">
</view>
</slot>
</view>
</view>
</template>

<script>
export default {
data() {
return {
tempFiles: [],
borderRC: ""
}
},
props: {
count: {   //true是单图
type: Boolean,
default: false
},
styleCss: {
type: String,
default: ""
},
borderR: {
type: String,
default: ""
},
value: {
type: Array,
default () {
return []
}
}
},
mounted() {
this.value.forEach(item => {
item.num = 0
item.isJia = false
item.key = new Date()
})
this.tempFiles = JSON.parse(JSON.stringify(this.value))
if (this.borderR) {
if (this.borderR.indexOf("%") != -1) {
this.borderRC = "border-radius:" + parseFloat(this.borderR) * 2 + "%"
} else {
this.borderRC = "border-radius:" + parseFloat(this.borderR) * 2 + "rpx"
}
}
},
methods: {
addImg(e) {
var flag = true
if (e != 0 && !this.count) flag = false
return flag
},
updataImgDelete(index) {
this.tempFiles.splice(index, 1);
this.$emit("input", this.tempFiles)
},
xiuGai(res, index) {
this.upApi([res.tempFilePaths[0]], this.tempFiles[index]).then(e => {
if (e.status * 1 == 200) {
this.tempFiles[index].isJia = false
this.tempFiles[index].path = this.$url.getHost() + e.data.path
this.$emit("input", this.tempFiles)
}
})
},
xinzeng(res, index) {
this.upApi([res.tempFilePaths[0]], this.tempFiles[index]).then(e => {
if (e.status * 1 == 200) {
this.tempFiles[index].path = this.$url.getHost() + e.data.path
this.tempFiles[index].isJia = false
this.$emit("input", this.tempFiles)
}
})
},
upApi(data, item) {
var that = this
return new Promise((resolve, reject) => {
var uploadTask = uni.uploadFile({
url: this.$url.host + this.$url.programe + "/thirdUpload/unauth/uploadImage",
header: {
'accept': 'application/json',
'token': this.$url.getToken()
},
filePath: data[0],
name: 'file',
formData: data[1] || {},
success: (response) => {
if (response.data.includes(`"success":true`)) {
response.data = JSON.parse(response.data)
} else {
that.tc("上传失败")
}
resolve(response.data)
},
fail: (response) => {
that.tc("上传失败")
console.log(response)
},
})
uploadTask.onProgressUpdate((res) => {
item.num = res.progress - 1
});
})
},
updataImgClick(index = "", item = {
num: 0,
isJia: true,
key: new Date(),
path: "",
createBy: null,
createTime: null,
deleted: false,
fileName: "",
id: null,
refId: null,
sort: 1,
spareA: null,
spareB: null,
title: null,
type: null,
updateBy: null,
updateTime: null,
version: null,
}) {
var that = this
uni.chooseImage({
count: 1,
sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], //从相册选择
success: function(res) {
//1M=1024KB=1048576B
if (res.tempFiles[0].size > 1048576 * 5) {
that.tc("禁止上传5M以上图片")
} else {
if (index + "") {
that.tempFiles[index].isJia = true
that.tempFiles[index].num = 0
that.xiuGai(res, index)
} else {
index = that.tempFiles.length
that.tempFiles.push(item)
that.xinzeng(res, index)
}
}
},
});

}
}
}
</script>

<style lang="scss" scoped>
.uploadImg {
display: flex;
flex-wrap: wrap;

.border-x {
width: 159rpx;
height: 159rpx;
margin: 0 16rpx 40rpx 0;

.line {
border-radius: 32rpx;
}

image {
border-radius: 16rpx;
position: relative;
}

.icon-jia {
color: #C5CAD5;
position: absolute;
font-size: 58rpx;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.icon-delete {
position: absolute;
font-size: 38rpx;
top: 0;
right: 0;
}
}
}
</style>

 

 

 

 使用

 

 

这是回显数据

 

 

效果