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);這是我封裝的方法，大家忽略就好。