Merge remote-tracking branch 'origin/2.0.1' into 2.0.1

k94314517

2025-06-25 f6722e13ba28cd292c162df9292bb3418ba12bec

 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>