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="{  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;
   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;
   350px;
  height: 25px;
}
.upload {
  position: relative;
  text-align: center;
  display: inline-block;
   75px;
  height: 25px;
  overflow: hidden;
}
.upload span {
  font-size: 12px;
  color: #777;
   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 {
   50px;
}
.progress {
  background-color: rgba(100, 100, 100, 0.2);
  border-radius: 5px;
  position: relative;
  margin: 0 10px;
  height: 10px;
   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;
   0;
  transition: width  ease 0.1s;
}
</style>

展示

　　

总结

　　想看 旺达和幻视 了

　　明天研究一下上传的东西