1.上傳圖片組件

<template><view class="basicUploadImage flex flex-wrap"><slot name="before"></slot><!-- 已經(jīng)上傳過(guò)的圖片 --><viewclass="imageWrap":style="imageStyle"v-for="(item, index) in imageList":key="index"><imageclass="image":src="item.url"@click="$common.previewImage([item])"></image><image@click.stop="delImage(index, 'cur')"class="delIcon":src="imgPrefixUrl && imgPrefixUrl + 'pic_del@2x.png'"></image></view><!-- 當(dāng)前正在上傳的圖片 --><view class="imageWrap" :style="imageStyle" v-if="curImageUrl"><imageclass="image":src="item"@click="$common.previewImage([{ url: item }])"></image><view class="progressLine"><viewv-if="imageProgressPercent && imageProgressPercent !== 1"class="line":style="'width:' + progressWidth + 'rpx'"></view></view></view><!-- 等待上傳的圖片列表 --><block v-if="waitImageList.length"><viewclass="imageWrap":style="imageStyle"v-for="(item, index) in waitImageList":key="index"><imageclass="image":src="item"@click="$common.previewImage([{ url: item }])"></image><image@click.stop="delImage(index, 'wait')"class="delIcon":src="imgPrefixUrl && imgPrefixUrl + 'pic_del@2x.png'"></image><view class="progressLine"><view class="line" style="width: 2rpx"></view></view></view></block><viewv-if="imageList.length + waitImageList.length < maxNum"class="uploadImage imageWrap":style="imageStyle"@click="onUploadClick"><image:src="imgPrefixUrl && imgPrefixUrl + 'upload_pic%402x.png'"></image><view class="add">上傳圖片</view></view><slot name="after"></slot></view> </template> <script> import { mapGetters, mapState } from "vuex"; export default {props: {//圖片樣式imageStyle: {default: "",type: String,},//最大上傳數(shù)量maxNum: {default: 9,type: Number || String,},//圖片列表imageList: {default: function () {return [];},type: Array,},//是否},data() {return {curImageUrl: "", //正在上傳的圖片waitImageList: [], //等待上傳的圖片列表};},computed: {// imageProgressPercent 全局上傳圖片的進(jìn)度...mapState(["imgPrefixUrl", "imageProgressPercent"]),/*** @author: yaoxueke* @description: 設(shè)置視頻進(jìn)度條* @param {*}* @return {*}*/progressWidth() {let totalWidth = 192; //進(jìn)度條完成時(shí)寬度let lineWidth = (totalWidth * (this.imageProgressPercent / 100)).toFixed(2);return lineWidth;},},methods: {/*** @author: yaoxueke* @description: 刪除圖片* @param {*} index 索引* @param {*} type cur 刪除當(dāng)前的視頻 wait刪除等待的視頻* @return {*}*/delImage(index, type) {if (type === "wait") {this.waitImageList.splice(index, 1);} else {this.$emit("delImage", index);}},/*** @author: yaoxueke* @description: 上傳視頻* @param {*}* @return {*}*/uploadImage() {this.$common.uploadImageFun(0, [this.curImageUrl], (imgInfo) => {this.curImageUrl = "";this.$emit("updateImage", imgInfo);if (this.waitImageList.length) {this.curImageUrl = this.waitImageList[0];this.waitImageList.splice(0, 1);this.uploadImage();}});},/*** @author: yaoxueke* @description: 上傳圖片* @param {*}* @return {*}*/onUploadClick() {let num = this.curImageUrl? this.maxNum - this.imageList.length - this.waitImageList.length - 1: this.maxNum - this.imageList.length - this.waitImageList.length;this.$common.chooseImage(num).then((res) => {let data = res;if (!this.curImageUrl) {//等待列表沒(méi)有圖片，說(shuō)明是第一次選擇圖片，從選擇的第一張開(kāi)始上傳this.curImageUrl = data[0];data.splice(0, 1); //刪除第一張，如果還有，其他加入等待上傳的圖片列表if (data.length) {data.forEach((item) => {this.waitImageList.push(item);});}this.uploadImage();} else {//等待列表有圖片，就把所有的圖片添加到等待列表res.forEach((item) => {this.waitImageList.push(item);});}});},}, }; </script> <style lang="scss" scoped> .basicUploadImage {.imageWrap {position: relative;margin: 14rpx 12rpx 0 0;.image {width: 100%;height: 100%;border-radius: 14rpx;border: 2rpx dashed rgba(0, 0, 0, 0.15);}.progressLine {position: absolute;left: 0;bottom: 0;width: 100%;height: 12rpx;border-radius: 8rpx;border: 1px solid #0feada;.line {border-radius: 10rpx;background: #0feada;width: 0;height: 100%;}}.delIcon {width: 30rpx;height: 30rpx;position: absolute;right: -10rpx;top: -10rpx;z-index: 9;}}.uploadImage {// text-align:center;display: flex;flex-direction: column;justify-content: center;align-items: center;// margin:0 auto;border-radius: 20rpx;border: 2rpx dashed rgba(0, 0, 0, 0.15);background: rgba(0, 0, 0, 0.02);margin-top: 16rpx;image {width: 72rpx;height: 72rpx;}.add {font-size: 24rpx;color: #4e4e4e;margin-top: 18rpx;}} } </style>

2.全局設(shè)置一個(gè)進(jìn)度字段(在此設(shè)置在vuex中)

? ?

state:{imageProgressPercent:0, }, mutations:{setImageProgressPercent(state,data){state.imageProgressPercent = data} },

3.上傳請(qǐng)求中監(jiān)聽(tīng)上傳進(jìn)度變化并更新全局進(jìn)度值

Vue.prototype.$store.commit('setImageProgressPercent',0) //每次上傳前進(jìn)度置0 return new Promise((resolve,reject) => {let uploadTask = uni.uploadFile({url,name: "file",header,formData:args.formData || {},filePath: args.path,// #ifdef MP-ALIPAYfileType:args.fileType || '',// #endifsuccess:function(res){if(res.statusCode === 200 && JSON.parse(res.data).code === '000000'){Vue.prototype.$store.commit('setImageProgressPercent',100) //上傳成功后進(jìn)度設(shè)置100resolve(JSON.parse(res.data).resData)}else{console.error(res,'上傳圖片返回錯(cuò)誤信息')uni.showToast({title: res && res.msg,icon: 'none',mask: true})reject(res)}},fail:function(err){console.error(err,'上傳圖片返回錯(cuò)誤信息')uni.showToast({title: err && err.msg,icon: 'none',mask: true})reject(err)}});//監(jiān)聽(tīng)上傳進(jìn)度uploadTask.onProgressUpdate((res) => {let progress = Number(res.progress) > 92 ? 92 : Number(res.progress)Vue.prototype.$store.commit('setImageProgressPercent',progress)if(res.progress == 100){uploadTask.offProgressUpdate(() => {console.log('取消監(jiān)聽(tīng)')})uploadTask = ''}});})

4.在頁(yè)面

<basicUploadImageref="basicUploadImage":maxNum="9"imageStyle="width:184rpx;height:184rpx;":imageList="picUrl"@updateImage="updateImageHandle"@delImage="delImageHandle"></basicUploadImage>picUrl:[{url：‘’}] updateImageHandle(imgInfo){console.log(imgInfo,'上傳圖片服務(wù)器返回?cái)?shù)據(jù)') } //刪除圖片 index 索引 delImageHandle(index){picUrl.splice(0,index)}

中使用

總結(jié)

以上是生活随笔為你收集整理的上传图片或者视频进度条的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。