k94314517
2025-06-25 f6722e13ba28cd292c162df9292bb3418ba12bec
company/src/components/common/upload.vue
@@ -12,7 +12,11 @@
                <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>
@@ -57,7 +61,19 @@
    },
    getFile (e) {
      if (e.target && e.target.files.length > 0) {
          const loading = this.$loading({
        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',
@@ -67,7 +83,7 @@
        const formdate = new FormData()
        formdate.append('file', e.target.files[0])
        formdate.append('folder', this.folder)
        axios.post(this.uploadImgUrl, formdate)
        axios.post(this.uploadImgUrl, formdate,config)
          .then(res => {
            this.$emit('success', res.data.data)
          })
@@ -75,7 +91,7 @@
            this.$message.error(e)
          })
          .finally(() => {
              loading.close();
            loading.close();
            this.$refs.file.value = null
          })
      }