From f6722e13ba28cd292c162df9292bb3418ba12bec Mon Sep 17 00:00:00 2001
From: k94314517 <8417338+k94314517@user.noreply.gitee.com>
Date: 星期三, 25 六月 2025 15:17:50 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/2.0.1' into 2.0.1
---
company/src/components/common/upload.vue | 156 +++++++++++++++++++++++++++++++---------------------
1 files changed, 93 insertions(+), 63 deletions(-)
diff --git a/company/src/components/common/upload.vue b/company/src/components/common/upload.vue
index 22d22f9..a8c6b0d 100644
--- a/company/src/components/common/upload.vue
+++ b/company/src/components/common/upload.vue
@@ -12,79 +12,110 @@
<i class="el-icon-plus"></i>
</div>
</div>
- <input type="file" ref="file" :accept="accept" @change="getFile" />
+ <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,
- default: []
- },
- accept: {
- type: String,
- default: ''
- },
- folder: {
- type: String,
- default: ''
- }
- },
- data() {
- return {
- uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/public/upload'
- }
- },
-
- methods: {
- fileType(url) {
- if (url.indexOf('.mp4') !== -1) {
- return 'video'
- } else {
- return 'img'
- }
- },
- getFile(e) {
- if (e.target && e.target.files.length > 0) {
- this.$emit('loading')
- const formdate = new FormData()
- formdate.append('file', e.target.files[0])
- formdate.append('folder', this.folder)
- axios.post(this.uploadImgUrl, formdate)
- .then(res => {
- this.$emit('success', res.data.data)
- })
- .catch(e => {
- this.$message.error(e)
- })
- .finally(() => {
- this.$refs.file.value = null
- })
- }
- },
- deleItem(index) {
- this.$emit('dele', index)
- }
- }
+import axios from 'axios'
+export default {
+ props: {
+ width: {
+ type: String,
+ default: '90px'
+ },
+ height: {
+ type: String,
+ default: '90px'
+ },
+ list: {
+ type: Array,
+ default: []
+ },
+ accept: {
+ type: String,
+ default: ''
+ },
+ folder: {
+ type: String,
+ default: ''
}
+ },
+ data () {
+ return {
+ uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/public/upload'
+ }
+ },
+
+ 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()
+ formdate.append('file', e.target.files[0])
+ formdate.append('folder', this.folder)
+ 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
+ })
+ }
+ },
+ deleItem (index) {
+ this.$emit('dele', index)
+ }
+ }
+}
</script>
<style lang="scss" scoped>
.file {
/*width: 100%;*/
/*height: 90px;*/
- margin: 10px 0;
+ 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;
}
@@ -138,4 +169,3 @@
}
}
</style>
-
--
Gitblit v1.9.3