jiangping
2025-06-24 6d9ce36cc8cdc48256a7292fffea58286d409c33
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,17 +61,29 @@
    },
    getFile (e) {
      if (e.target && e.target.files.length > 0) {
          const loading = this.$loading({
              lock: true,
              text: '上传中,请等待',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
          });
        this.$emit('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',
        //       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)
        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
          })
      }