2/12 vue-axios 中 onUploadProgress 實現 上傳圖片 動態進度條

寫在前面

　　今天折騰了一下午加一點點晚上的時間，終於把圖片上傳，動態進度條給搞出來了

　　我一直懷疑是 supervisor 這個狗屎東西 不會很好地刷新 熱部署，導致我上傳失敗

　　明天繼續整理 上傳的東西，搞懂

　　今天就主要記錄一下，動態進度條

---

思路

　　思路就是得用找到上傳的狀態，算出離結束還有多久/占多少百分比

　　於是在網上找呀找，但是那些都要 websocket 全雙工的通信協議 我這個小白 無力

　　機緣巧合 看到了 說 axios 也可以搞這個東西，用自帶的 config 一個屬性就行了

　　也是就我們說的這個

　　

　　普遍的寫法就是這樣

　　這里先說一下 完整的 格式是這樣的

this.axios
        .post(url, param, config)
        .then(...)

　　config 里面包含一些請求信息，一些奇奇怪怪的屬性（ 就是方法 )

　　比如說 這次的 onUploadProgress

　　完整代碼

　　mehods 里面的 update 方法 注意 axios  ( 這個代碼是借鑒於別人基礎之上的 ）

　　

 update(event) {
      let self = this;
      let file = event.target.files[0];
      let param = new FormData(); // 創建form對象
      param.append("file", file); // 通過append向form對象添加數據
      console.log(param.get("file")); // FormData私有類對象，訪問不到，可以通過get判斷值是否傳進去

      this.axios
        .post("/demo/upload_test", param, {
          // 給個請求頭，讓后端知道應該怎么處理數據
          headers: {
            "Content-Type": "multipart/form-data",
          },
          onUploadProgress: (progressEvent) => {
            let processStatu =
              (((progressEvent.loaded / progressEvent.total) * 100) | 0) ;
            self.index = processStatu;
          },
        })
        .then((response) => {
          console.log(response.data);
        });
    },

　　然后是這個組件的源碼，其實看到這里，就會很清楚，只要插值綁定一個數值就能動態的顯示了

　　

　　組件源碼

<template>
  <div class="reviews-container">
    <h2>圖片上傳</h2>
    <!-- 上傳文件 -->
    <div class="upload-container">
      <div class="upload">
        <span> {{ msg }}</span>
        <input
          class="upload-input"
          name="file"
          type="file"
          accept="image/png,image/gif,image/jpeg"
          @change="update($event)"
        />
      </div>
    </div>
    <div class="review">
      <span class="icon-container">上傳進度</span>
      <div class="progress">
        <div class="progress-done" :style="{ width: index + '%' }"></div>
      </div>
      <span class="percent">{{ index }}%</span>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "processBar",
  props: {
    userId: {
      type: String,
      validator(value) {
        //  判斷String是否為空
        return value;
      },
      default: "",
    }
  },
  components: {},
  data() {
    return {
        index:0,
      msg: "選擇圖片",
    };
  },
  mounted() {},
  computed: {
  },
  methods: {
    update(event) {
      let self = this;
      let file = event.target.files[0];
      let param = new FormData(); // 創建form對象
      param.append("file", file); // 通過append向form對象添加數據
      console.log(param.get("file")); // FormData私有類對象，訪問不到，可以通過get判斷值是否傳進去

      this.axios
        .post("/demo/upload_test", param, {
          // 給個請求頭，讓后端知道應該怎么處理數據
          headers: {
            "Content-Type": "multipart/form-data",
          },
          onUploadProgress: (progressEvent) => {
            let processStatu =
              (((progressEvent.loaded / progressEvent.total) * 100) | 0) ;
            self.index = processStatu;
          },
        })
        .then((response) => {
          console.log(response.data);
        });
    },
  },
};
</script>
 
<style scoped>
.review-title h2 {
  margin: 0 0 0;
}
.reviews-container {
  margin: 0 auto;
  display: block;
  width: 350px;
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 0.3);
  padding: 20px;
}
.upload-container {
  text-align: left;
  margin: 0 auto;
  display: block;
  width: 350px;
  height: 25px;
}
.upload {
  position: relative;
  text-align: center;
  display: inline-block;
  width: 75px;
  height: 25px;
  overflow: hidden;
}
.upload span {
  font-size: 12px;
  color: #777;
  width: 80px;
  margin: auto 0;
  left: -1px;
}

.upload .upload-input {
  position: absolute;
  right: 0;
  top: 0;
  opacity: 0;
  float: right;
}
.upload:hover,
.upload-input:hover {
  cursor: pointer;
  /* border: 1px solid #ddd; */
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 0.7);
}
.fileinput-button {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.review {
  border: 1px solid transparent;
  border-radius: 5px;
  color: #777;
  display: flex;
  font-size: 12px;
  align-items: center;
  padding: 10px;
  margin: 5px 0;
}

.review:hover {
  cursor: pointer;
  /* border: 1px solid #ddd; */
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 0.7);
}
.icon-container {
  width: 50px;
}
.progress {
  background-color: rgba(100, 100, 100, 0.2);
  border-radius: 5px;
  position: relative;
  margin: 0 10px;
  height: 10px;
  width: 200px;
}

.progress-done {
  background: linear-gradient(to left, rgb(242, 112, 156), rgb(255, 148, 114));
  box-shadow: 0 3px 3px -5px rgb(242, 112, 156), 0 2px 5px rgb(242, 112, 156);
  border-radius: 5px;
  height: 10px;
  width: 0;
  transition: width  ease 0.1s;
}
</style>

展示

　　

 

總結

　　想看 旺達和幻視 了

　　明天研究一下上傳的東西