From 780a43e411b6aabaabdd7d5dadbc9b0cf32353d4 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期三, 25 六月 2025 15:57:07 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/2.0.1' into 2.0.1
---
company/src/components/common/uploadProgress.vue | 207 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 207 insertions(+), 0 deletions(-)
diff --git a/company/src/components/common/uploadProgress.vue b/company/src/components/common/uploadProgress.vue
new file mode 100644
index 0000000..14829a8
--- /dev/null
+++ b/company/src/components/common/uploadProgress.vue
@@ -0,0 +1,207 @@
+<template>
+ <div class="file">
+ <div class="file_list">
+ <div class="file_list_item" :style="{width: width, height: height}" v-for="(item, index) in list" :key="index">
+ <div class="dele" @click="deleItem(index)">
+ <i class="el-icon-close"></i>
+ </div>
+ <img :src="item.url" v-if="fileType(item.url) === 'img'" />
+ <video controls autoplay :src="item.url" v-else></video>
+ </div>
+ <div class="file_list_item" :style="{width: width, height: height, cursor: 'pointer'}" @click="$refs.file.click()">
+ <i class="el-icon-plus"></i>
+ </div>
+ </div>
+ <div style="display: block;">
+ <input type="file" ref="file" :accept="accept" @change="getFile" />
+ <progress id="progressBar" value="0" max="100" ></progress>
+ <span id="status">0%</span>
+ </div>
+ </div>
+</template>
+
+<script>
+import axios from 'axios'
+export default {
+ props: {
+ width: {
+ type: String,
+ default: '90px'
+ },
+ height: {
+ type: String,
+ default: '90px'
+ },
+ list: {
+ type: Array,
+ // eslint-disable-next-line vue/require-valid-default-prop
+ default: []
+ },
+ accept: {
+ type: String,
+ default: ''
+ },
+ folder: {
+ type: String,
+ default: ''
+ }
+ },
+ data () {
+ return {
+ uuid: null,
+ uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/public/upload',
+ uploadProgressUrl: process.env.VUE_APP_API_PREFIX + '/public'
+ }
+ },
+
+ methods: {
+ fileType (url) {
+ if (url.indexOf('.mp4') !== -1) {
+ return 'video'
+ } else {
+ return 'img'
+ }
+ },
+ getFile (e) {
+ if (e.target && e.target.files.length > 0) {
+ const config = {
+ onUploadProgress: function (progressEvent) {
+ console.log(progressEvent)
+ const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
+ document.getElementById('progressBar').value = percentCompleted
+ document.getElementById('status').textContent = '鍑嗗' + percentCompleted + '%'
+ },
+ headers: {
+ 'Content-Type': 'multipart/form-data'
+ }
+ }
+ // const loading = this.$loading({
+ // lock: true,
+ // text: '涓婁紶涓紝璇风瓑寰�',
+ // spinner: 'el-icon-loading',
+ // background: 'rgba(0, 0, 0, 0.7)'
+ // })
+ // this.$emit('loading')
+ const formdate = new FormData()
+ this.uuid = this.generateUUID().replaceAll('-', '')
+ formdate.append('file', e.target.files[0])
+ formdate.append('folder', this.folder)
+ formdate.append('uuid', this.uuid)
+ axios.post(this.uploadImgUrl, formdate, config)
+ .then(res => {
+ this.$emit('success', res.data.data)
+ })
+ .catch(e => {
+ this.$message.error(e)
+ })
+ .finally(() => {
+ // loading.close()
+ this.$refs.file.value = null
+ })
+ this.startProgress()
+ }
+ },
+ startProgress () {
+ var that = this
+ var timer = setInterval(function () {
+ axios.get(that.uploadProgressUrl + '/' + that.uuid)
+ .then(res => {
+ if (res != null && res.data && res.data.data) {
+ if (res.data.data.status === 1) {
+ const percentCompleted = Math.round(res.data.data.rate || 0)
+ document.getElementById('progressBar').value = percentCompleted
+ document.getElementById('status').textContent = '涓婁紶涓�' + percentCompleted + '%'
+ } else if (res.data.data.status === 2){
+ document.getElementById('progressBar').value = 100
+ document.getElementById('status').textContent = '宸插畬鎴�' + 100 + '%'
+ clearInterval(timer)
+ } else if (res.data.data.status === 3){
+ const percentCompleted = Math.round(res.data.data.rate || 0)
+ document.getElementById('progressBar').value = percentCompleted
+ document.getElementById('status').textContent = '涓婁紶澶辫触' + percentCompleted + '%'
+ clearInterval(timer)
+ }
+ }
+ })
+ }, 2000)
+ },
+ generateUUID () {
+ return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+ const r = (Math.random() * 16) | 0
+ const v = c === 'x' ? r : (r & 0x3) | 0x8
+ return v.toString(16)
+ })
+ },
+ deleItem (index) {
+ this.$emit('dele', index)
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+ .file {
+ /*width: 100%;*/
+ /*height: 90px;*/
+ padding: 10px;
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ position: relative;
+ margin-bottom: 10px;
+ /* margin-right: 20px; */
+ /* margin: 10px 0;*/
+ input {
+ opacity: 0;
+ }
+ .file_list {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ .file_list_item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ border-radius: 5px;
+ border: 1px solid #d5d5d5;
+ margin-left: 15px;
+ position: relative;
+ &:first-child {
+ margin: 0 !important;
+ }
+ .dele {
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 20px;
+ height: 20px;
+ background: red;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ .el-icon-close {
+ color: #ffffff;
+ font-size: 19px;
+ }
+ }
+ .el-icon-plus {
+ font-size: 30px;
+ color: black;
+ }
+ img {
+ width: 100%;
+ }
+ video {
+ width: 100%;
+ height: 100%;
+ }
+ }
+ }
+ }
+</style>
--
Gitblit v1.9.3