1.上傳圖片組件

<template><view class="basicUploadImage flex flex-wrap"><slot name="before"></slot><!-- 已經上傳過的圖片 --><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><!-- 當前正在上傳的圖片 --><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,},//最大上傳數量maxNum: {default: 9,type: Number || String,},//圖片列表imageList: {default: function () {return [];},type: Array,},//是否},data() {return {curImageUrl: "", //正在上傳的圖片waitImageList: [], //等待上傳的圖片列表};},computed: {// imageProgressPercent 全局上傳圖片的進度...mapState(["imgPrefixUrl", "imageProgressPercent"]),/*** @author: yaoxueke* @description: 設置視頻進度條* @param {*}* @return {*}*/progressWidth() {let totalWidth = 192; //進度條完成時寬度let lineWidth = (totalWidth * (this.imageProgressPercent / 100)).toFixed(2);return lineWidth;},},methods: {/*** @author: yaoxueke* @description: 刪除圖片* @param {*} index 索引* @param {*} type cur 刪除當前的視頻 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) {//等待列表沒有圖片，說明是第一次選擇圖片，從選擇的第一張開始上傳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.全局設置一個進度字段(在此設置在vuex中)

? ?

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

3.上傳請求中監聽上傳進度變化并更新全局進度值

Vue.prototype.$store.commit('setImageProgressPercent',0) //每次上傳前進度置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) //上傳成功后進度設置100resolve(JSON.parse(res.data).resData)}else{console.error(res,'上傳圖片返回錯誤信息')uni.showToast({title: res && res.msg,icon: 'none',mask: true})reject(res)}},fail:function(err){console.error(err,'上傳圖片返回錯誤信息')uni.showToast({title: err && err.msg,icon: 'none',mask: true})reject(err)}});//監聽上傳進度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('取消監聽')})uploadTask = ''}});})

4.在頁面

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

中使用

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。