zoukankan      html  css  js  c++  java
  • vue项目上传文件以及进度条

    最近做项目的时候,需要上传自定义镜像。并且附带进度条,上网查询一下资料,经过一番折磨,也总算做出来了,把自己写项目的内容给大家分享一下。

    先直接贴代码吧

    1.首先声明一个formData对象。

    2.把需要上传的参数利用append追加进去。

    append('参数名','值')

    第一个this.$refs.upload.files[0],其实就是input标签加上ref唯一关键字就是upload。

              var fd = new FormData();
                    fd.append('image', that.$refs.upload.files[0]);
                    fd.append('filename', that.formData.images);
                    fd.append("system_type", that.formData.systemTypeVal);
                    fd.append("name", that.formData.imagesName);
                    fd.append("description", that.formData.description);
                    fd.append("system_vision", that.formData.systemVersion);
                    fd.append("disk_format", that.formData.format);
                    that.Axios({
                      method: 'post',
                      url: that.prefix + '/yr_images/create_image/',
                      data: fd,
                      headers: { 'Content-Type': 'multipart/form-data' },
                      onUploadProgress(progressEvent){
                        if (progressEvent.lengthComputable) {
                          let val = (progressEvent.loaded / progressEvent.total * 100).toFixed(0);
                          that.formData.showProgress = true;
                          that.formData.startValue = parseInt(val)
                        }
                      }
                    })
                      .then(function (response) {
                        if (response.data.status == 1) {
                          if (that.formData.startValue == 100) {
                            util.notification('success', '成功', response.data.success_msg);
                            that.getData(1);
                          }
                        } else {
                          util.notification('error', '错误', response.data.error_msg);
                        }
                        that.modal.formVisible = false;
                      })
                      .catch(function (error) {
                        that.modal.loading = false;
                        that.modal.formVisible = false;
                        console.log(error);
                      })

    在上面代码里面的

    onUploadProgress就是进度条部分,上传进度条当value值为100%时完成后续操作。

    安装上面的操作上传文件成功是一定可以的。
    util.notification('success', '成功', response.data.success_msg);这是我封装的方法,大家忽略就好。
     
  • 相关阅读:
    SpringMVC总结
    javaEE学习路线与目标
    mybatis逆向工程的注意事项,以及数据库表
    数据库权限表个表的关系
    Spring Security中html页面设置hasRole无效的问题
    StartUML的基础的使用,用例图,序列图
    oracle中文乱码问题解决
    Eclipse中的创建maven项目,无法添加src/main/java等source folder
    StarUML 系列,静态图与动态图,用例图,类图
    爬虫入门程序开门见山
  • 原文地址:https://www.cnblogs.com/chinabin1993/p/8445313.html
Copyright © 2011-2022 走看看