提交一把订单

jiangping

2025-06-25 e1749501b9ea6400ff064f206a45bf7df7074ccc

 company/src/components/common/uploadProgress.vue

@@ -14,8 +14,8 @@
        </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>
<!--          <progress id="progressBar" value="0" max="100" ></progress>-->
<!--          <span id="status">0%</span>-->
        </div>
    </div>
</template>
@@ -48,7 +48,9 @@
  },
  data () {
    return {
      loading:null,
      uuid: null,
      message:'开始上传',
      uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/public/upload',
      uploadProgressUrl: process.env.VUE_APP_API_PREFIX + '/public'
    }
@@ -64,24 +66,27 @@
    },
    getFile (e) {
      if (e.target && e.target.files.length > 0) {
        var that = this
        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 + '%'
            // document.getElementById('progressBar').value = percentCompleted
            // document.getElementById('status').textContent = '准备' + percentCompleted + '%'
            that.loading.setText('准备【 ' + 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')
        this.loading = this.$loading({
          lock: true,
          text: '上传中，请等待',
          spinner: 'el-icon-loading',
          customClass: 'loadingclz',
          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])
@@ -89,13 +94,17 @@
        formdate.append('uuid', this.uuid)
        axios.post(this.uploadImgUrl, formdate, config)
          .then(res => {
            this.$emit('success', res.data.data)
            if(res.data.data == null || res.data.data.imgaddr == null){
              this.$message.error('数据上传失败！')
            }else{
              this.$emit('success', res.data.data)
            }
          })
          .catch(e => {
            this.$message.error(e)
          })
          .finally(() => {
            // loading.close()
            that.loading.close()
            this.$refs.file.value = null
          })
        this.startProgress()
@@ -109,21 +118,24 @@
            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 + '%'
                // document.getElementById('progressBar').value = percentCompleted
                // document.getElementById('status').textContent = '上传中' + percentCompleted + '%'
                that.loading.setText('上传中 【 ' + percentCompleted + ' 】%')
              } else if (res.data.data.status === 2) {
                // document.getElementById('progressBar').value = 100
                // document.getElementById('status').textContent = '已完成' + 100 + '%'
                that.loading.setText( '已完成 【 ' + 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 + '%'
                // document.getElementById('progressBar').value = percentCompleted
                // document.getElementById('status').textContent = '上传失败' + percentCompleted + '%'
                that.loading.setText('上传失败 【 ' + percentCompleted + ' 】%')
                clearInterval(timer)
              }
            }
          })
      }, 2000)
      }, 1000)
    },
    generateUUID () {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
@@ -138,7 +150,17 @@
  }
}
</script>

<style>
  .loadingclz {
    .el-loading-text{
      font-size: 18px  !important;
      color: #2977f8 !important;
    }
   .el-loading-spinner i {
      color: #2977f8 !important;
    }
  }
</style>
<style lang="scss" scoped>
    .file {
        /*width: 100%;*/