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

先直接贴代码吧

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);这是我封装的方法,大家忽略就好。
 

vue项目上传文件以及进度条的更多相关文章

  1. layui上传文件配合进度条

    首先看一下效果图: 修改layui的源文件upload.js 1.打开layui/modules/upload.js 2.搜索ajax 3.找到url: 4.添加以下代码: ,xhr:l.xhr(fu ...

  2. asp.net mvc 实现上传文件带进度条

    本文乃是博主早期写的,此种思路虽然实现了,但固然不是最好的,仅做参考学习. 可以用js onprogress .fileinput .webuploader.jq ajaxsubmit等实现 思路:a ...

  3. Extjs 使用fileupload插件上传文件 带进度条显示

    一.首先我们看看官方给出的插件的解释: 一个文件上传表单项具有自定义的样式,并且可以控制按钮的文本和 像文本表单的空文本类似的其他特性. 它使用一个隐藏的文件输入元素,并在用户选择文件后 在form提 ...

  4. struts2上传文件添加进度条

    给文件上传添加进度条,整了两天终于成功了. 想要添加一个上传的进度条,通过分析,应该是需要不断的去访问服务器,询问上传文件的大小.通过已上传文件的大小, 和上传文件的总长度来评估上传的进度. 实现监听 ...

  5. jQuery上传文件显示进度条

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script sr ...

  6. XMLHttpRequest上传文件实现进度条

    话不多说,直接上代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  7. FormData上传文件 带进度条

    * jQuery ajax  FormData 上传文件 template $.ajax({ url: url, type: 'POST', data: new FormData(form), dat ...

  8. ASP.NET Jquery+ajax上传文件(带进度条)

    效果图 支持ie6+,chrome,ie6中文文件名会显示乱码. 上传时候会显示进度条. 需要jquery.uploadify.js插件,稍后会给出下载 前台代码 <%@ Page Langua ...

  9. ajaxSubmit() 上传文件和进度条显示

    1.  首先引用js文件 <script type="text/javascript" src="/js/jquery/jquery.form.js"&g ...

随机推荐

  1. LigerUi中表(Grid)控件的相关属性笔记

    http://blog.csdn.net/dxnn520/article/details/8216560 // ========================================= [每 ...

  2. axios获取后端数据

    axios向后端请求数据时,一直获取不到数据, 后来改成这样写获取到了数据 不是一个this,有人说用箭头函数就可以了.

  3. SQL查询出每门课都大于80 分的学生姓名

    Course表如下: 查询出每门课都大于80 分的学生姓名有两种方法. 1.select  distinct name from Course where name not in (select di ...

  4. dom节点获取文本的方式

    1. innerHTML innerHTML可以作为获取文本的方法也可以作为修改文本内容的方法 element.innerHTML 会直接返回element节点下所有的HTML化的文本内容 <b ...

  5. Java 技术栈

    JAVA是一个面向对象的编程语言,由SUN公司的程序员所开发.它不仅吸收了C++的各种优点,而且还撇弃了C++中难以理解的概念,如多继承.指针等:因此JAVA语言具有功能强大且简单易用两个特征, JA ...

  6. html5定位获取当前位置并在百度地图上显示

    用html5的地理定位功能通过手机定位获取当前位置并在地图上居中显示出来,下面是百度地图API的使用过程,有需要的朋友可以参考下 在开发移动端 web 或者webapp时,使用百度地图 API 的过程 ...

  7. 使用natapp本地映射外网服务

    官网:https://natapp.cn/ 软件很好用,这对于前端工程师来说,有了这个工具就很爽了,当你的领导或者不在你公司内网范围内的人,想要看你的页面效果,就很简单了. 详细的不用更多介绍,直接去 ...

  8. 最全的PHP函数详解

    usleep() 函数延迟代码执行若干微秒. unpack() 函数从二进制字符串对数据进行解包. uniqid() 函数基于以微秒计的当前时间,生成一个唯一的 ID. time_sleep_unti ...

  9. DAG上的动态规划——嵌套矩阵问题

    问题描述:有n个矩形,每个矩形可以用两个整数a,b描述,表示它的长和宽.矩形X(a,b)可以嵌套在矩形Y(c,d)中当且仅当a<c,b<d,或者b<c,a<d(相当于把矩形X旋 ...

  10. 有关js的一些小问题

    忘了从哪里找来抄下来的: js执行顺序问题 1.函数的声明和调用 “定义式”函数声明 function fn1() {......} "赋值式"函数声明 var f=functio ...