实现上传图片进度条

最新推荐文章于 2024-05-31 23:37:37 发布

不就一个vue

最新推荐文章于 2024-05-31 23:37:37 发布

阅读量930

点赞数

分类专栏： h5 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_50259095/article/details/125783706

版权

h5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link
rel="stylesheet"
href="https://unpkg.com/vant@2.12/lib/index.css"
/>

<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://unpkg.com/vue@2.6/dist/vue.min.js"></script>
<script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script>
<!-- <script src="./新建文件夹 (3)/axios.js"></script> -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
  <!-- 引入样式文件 -->
  <div id="app">

    <div><van-uploader :after-read="afterRead" /></div>
    <div><van-circle v-model="currentRate" :rate="0" :speed="100" :text="text" /></div>
 
  </div>
<script>
// 在 #app 标签下渲染一个按钮组件
new Vue({
  el: '#app',
  data(){
    return {
      token:'xxxxxxxxxxx',
      currentRate: 0,
      params:{}
    }
  },
  computed: {
    text() {
      return this.currentRate.toFixed(0) + '%';
    },
  },
  methods:{
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      this.params.file = file.file
      var that = this
      axios({
      url:'http://xxxxxxxxx.com/api/common/upload',
      method:'post',
      headers: { // 设置请求头
						token: this.token,
            "Content-Type":'multipart/form-data'
					},
      data:that.params,
      onUploadProgress:function(progressEvent){ //原生获取上传进度的事件
        if(progressEvent.lengthComputable){
          //属性lengthComputable主要表明总共需要完成的工作量和已经完成的工作是否可以被测量
          //如果lengthComputable为false，就获取不到progressEvent.total和progressEvent.loaded
          // console.log(progressEvent);
          that.callback1(progressEvent);
        }
      },

    }).then(res =>{
      // callback2(res.data);
      console.log(res,'res');
      if(res.data.code ==1){
        vant.Toast('上传成功');

      }
    }).then(error =>{
      console.log(error)
    })
    },
    callback1(progressEvent){
        console.log(progressEvent);
        this.currentRate = (progressEvent.loaded/progressEvent.total)*100
    }
  }

});

// 调用函数组件，弹出一个 Toast
// vant.Toast('提示');

// 通过 CDN 引入时不会自动注册 Lazyload 组件
// 可以通过下面的方式手动注册
Vue.use(vant.Lazyload);
</script>
</body>
</html>