精华内容
下载资源
问答
  • axios+Vue实现上传文件显示进度功能发布时间:2020-09-05 11:59:09来源:脚本之家阅读:92作者:越笨越爱一,前言最近在用Vue,然后上传文件时需要显示进度,于是网上搜了一下,经过自己实测终于也弄明白了二,效果三...

    axios+Vue实现上传文件显示进度功能

    发布时间:2020-09-05 11:59:09

    来源:脚本之家

    阅读:92

    作者:越笨越爱

    一,前言

    最近在用Vue,然后上传文件时需要显示进度,于是网上搜了一下,经过自己实测终于也弄明白了

    二,效果

    a9bf6a2bb4bf2065c22f5fe3a3155b1b.png

    三,代码

    HTML代码

    上传文件:

    {{filename}}

    +请选择文件上传+

    上传进度:

    {{(uploadRate*100).toFixed(2)}}%

    CSS代码

    .input-zone { width: 500px; color: blue; font-size: 14px; position: relative; }

    .input-zone input[type='file'] { opacity: 0; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2; }

    .progress-wrapper { position: relative; height: 50px; border-radius: 5px; background-color: lightgrey; }

    .progress-wrapper .progress-progress { position: absolute; left: 0; top: 0; height: 100%; width: 0%; border-radius: 5px; background-color: darkturquoise; z-index: 1; }

    .progress-wrapper .progress-rate { position: relative; text-align: center; font-size: 14px; line-height: 50px; height: 100%; z-index:2;}

    JS代码

    var app = new Vue({

    el: "#app",

    data: {

    uploadRate: 0,

    filename: '',

    uploadStyle: {

    width: '0%'

    }

    },

    methods: {

    upload: function (e) {

    var vm = this;

    var formData = new FormData();

    formData.append("name", "Alax");

    for (var i = 0; i < e.target.files.length; i++) {

    var file = e.target.files[i]; //取第1个文件

    formData.append("file", file);

    vm.filename = file.name;

    console.log(file);

    }

    var config = {

    headers: { 'Content-Type': 'multipart/form-data' },

    onUploadProgress: function (e) {

    console.log("进度:");

    console.log(e);

    //属性lengthComputable主要表明总共需要完成的工作量和已经完成的工作是否可以被测量

    //如果lengthComputable为false,就获取不到e.total和e.loaded

    if (e.lengthComputable) {

    var rate = vm.uploadRate = e.loaded / e.total; //已上传的比例

    if (rate < 1) {

    //这里的进度只能表明文件已经上传到后台,但是后台有没有处理完还不知道

    //因此不能直接显示为100%,不然用户会误以为已经上传完毕,关掉浏览器的话就可能导致上传失败

    //等响应回来时,再将进度设为100%

    vm.uploadRate = rate;

    vm.uploadStyle.width = (rate *100).toFixed(2)+ '%';

    }

    }

    }

    };

    axios.post("/ajaxPage/VueUpload.aspx?method=upload", formData, config)

    .then(function (data) {

    console.log(data);

    var json = data.data; //后台实际返回的结果

    if (json.result) {

    vm.uploadRate = 1;

    vm.uploadStyle.width = '100.00%';

    } else {

    alert(json.msg);

    }

    })

    .catch(function (err) {

    console.log(err);

    });

    }

    }

    })

    四,总结

    1.其实单文件上传和多文件上传的区别就是 input标签中多了一个属性

    multiple="multiple"

    2.onuploadprogress 事件中显示上传为100%并不准确,一定要等到响应回来才能认为完成了100%,不然用户此时关闭了浏览器的话,上传就失败了。或者有其它逻辑时,此时点提交,就会导致后台找不到上传的文件路径等问题。

    总结

    以上所述是小编给大家介绍的axios+Vue实现上传文件显示进度功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

    展开全文
  • 最近在用Vue,然后上传文件时需要显示进度,于是网上搜了一下,经过自己实测终于也弄明白了 二,效果 三,代码 HTML代码 上传文件: <span v-if=filename>{{filename}} <span>+请选择文件上传+ <input ...
  • 今天简单实现上传文件功能,上传文件是需要Jar包的。首先我们在pom文件中引入jar包依赖; <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId>...

    今天简单实现上传文件功能,上传文件是需要Jar包的。首先我们在pom文件中引入jar包依赖;

                    <dependency>
    		       <groupId>commons-io</groupId>
    			<artifactId>commons-io</artifactId>
    			<version>2.4</version>
    		</dependency>
    		<dependency>
    			<groupId>commons-fileupload</groupId>
    			<artifactId>commons-fileupload</artifactId>
    			<version>1.3.1</version>
    		</dependency>

    vue前端:

    <input type="file" name="upfile" @change="upload"></input>
    <button @click="uploadFile">上传文件</button>
            data() {
                return {
                    file: ''
                }
            },
            methods: {
                uploadFile(e) {
                    let formData = new FormData();
                    // 把内容放入到FormData中
                    formData.append("upfile", this.file);
                    axiosRequest({
                        url: '/api/uploadFile',
                        method: 'post',
                        // 通过data属性将内容携带到后台
                        data: formData,
                        // 设置请求头
                        headers: {
                            "Content-Type" : "multipart/form-data"
                        }
                    }).then(res => {
                        if (res.data.status === 200) {
                            this.$notify.success({
                                title: '成功',
                                message: res.data.message
                            });
                        } else if (res.data.status === 400) {
                            this.$notify.error({
                                title: '错误',
                                message: res.data.message
                            });
                        }
                    },
                    err => {
                        this.$notify.error({
                            title: '错误',
                            message: "上传失败!"
                        });
                    });
                },
                upload(e) {
                    // 获取input内容
                    this.file = e.target.files[0];
                }
            }

    后台:

    @PostMapping("/uploadFile")
    	public ResultMap uploadFile(@RequestParam("upfile") MultipartFile upfile) throws IOException {
    		ResultMap resultMap = new ResultMap();
    		String originalFilename = upfile.getOriginalFilename();
    		String realPath = ResourceUtils.getURL("classpath:").getPath() + "upload";
    		File file = new File(realPath, originalFilename);
    		if (!file.exists()) {
    			try {
    				upfile.transferTo(new File(realPath, originalFilename));
    				resultMap.setSuccess();
    				resultMap.setMessage("上传成功!");
    			} catch (IllegalStateException | IOException e) {
    				resultMap.setFaild();
    				resultMap.setMessage("上传失败!");
    				e.printStackTrace();
    			}
    		} else {
    			file.delete();
    			try {
    				upfile.transferTo(new File(realPath, originalFilename));
    			} catch (IllegalStateException | IOException e) {
    				e.printStackTrace();
    			}
    			resultMap.setSuccess();
    			resultMap.setMessage("文件替换成功!");
    		}
    		return resultMap;
    	}

     

     

     

    展开全文
  • tornado+vue实现上传文件

    千次阅读 2018-11-19 11:39:00
    要用tornado+vue写一个后台管理系统,记录一下遇到文件上传时候的步骤: 1.Form表单里的代码:(这里是使用的饿了么表单组件) &lt;el-form-item label="头像"&gt; &lt;el-upload class=&...

    要用tornado+vue写一个后台管理系统,记录一下遇到文件上传时候的步骤:

    1.Form表单里的代码:(这里是使用的饿了么表单组件)

     <el-form-item label="头像">
                <el-upload
                        class="avatar-uploader"//上传框框的样式
                        v-bind:action="FileUploadInterface"//这是请求后台的接口
                        //是否展示图片列表形式                    
                        :show-file-list="false"
                        :on-success="fund_manager_image_on_success"//接口调用成功之后的方法
                        //上传文件之前的判断方法,校验是否符合上传规范                    
                        :before-upload="fund_manager_image_before_upload">
                        //如果表单对象有图片,展示出来,没有展示要上传图标样式
                       <img v-if="formData.image" :src="formData.image" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                //展示图片地址
                <el-input v-model="formData.image"></el-input>
    
           </el-form-item>

    2.method里面的方法:

    //图片格式校验
     fund_manager_image_before_upload (file) {
          const isJPG =
                  (file.name.endsWith('.JPG')) || (file.name.endsWith('.jpg')) ||
                  (file.name.endsWith('.jpeg')) || (file.name.endsWith('.jpeg')) ||
                  (file.name.endsWith('.PNG')) || (file.name.endsWith('.png'))
          const isLt2M = file.size / 1024 / 1024 < 10
    
          if (!isJPG) {
            this.$message.error('上传文件格式不正确!')
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 10MB!')
          }
          if (isJPG && isLt2M) {
            this.formData.image = ' '
          }
          return isJPG && isLt2M
        },
        //上传完成后的判断
        fund_manager_image_on_success (sss, item) {
          if (sss != null && sss.success) {
            this.formData.image = sss.data.src
          } else {
            this.formData.image = ''
          }
        }

    3.后端代码(这里MyRequestHandler是做了处理,直接RequestHandler也可)

    #上传文件接口
    class FileUploadInterface(MyRequestHandler):
        #tornado的一个get请求
        def post(self):
            print("请求到了")
            # 判断上传文件大小
            size = int(self.request.headers.get('Content-Length'))
            print('图片大小:kb',size/1000)
            if size / 1000.0 > 2000:
                self.write("上传图片不能大于2M.")
                #获取请求里的文件
            imgfiles = self.request.files.get('file')
            if imgfiles is not None and len(imgfiles)>0:
                #单文件
                img=imgfiles[0]
                print(img.filename)
                print(img.body)
                print(img.content_type)
                # 对文件进行重命名
                name = get_file_name_by_time() +img.filename
                #阿里云文件上传            
                status=uploat_file(img.body,name)
                if status==200:
                    result = {}
                    result["src"] = "http://img1.jiutouxiang.com/"+name
                    self.write(str(RJ(data=result)))
                    return
            #相当于响应给页面
            self.write(str(RJ(success=False)))

    4.阿里云上传文件代码

    # -*- coding: utf-8 -*-
    import oss2
    
    #上传文件到阿里云
    def uploat_file(input,name):
        # 阿里云主账号AccessKey拥有所有API的访问权限,风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维,请登录 https://ram.console.aliyun.com 创建RAM账号。
        #auth = oss2.Auth('<yourAccessKeyId>', '<yourAccessKeySecret>')
        auth = oss2.Auth('51oVyuUmca02rNUe', 'DknGfLtN9Uo1he17CQd1cKtWyhS2Xq')
        # Endpoint以杭州为例,其它Region请按实际情况填写。
        bucket = oss2.Bucket(auth, 'http://oss-cn-shanghai.aliyuncs.com', 'jiutouxiang-oss')
    
        # requests.get返回的是一个可迭代对象(Iterable),此时Python SDK会通过Chunked Encoding方式上传。
        #input = requests.get('http://www.aliyun.com')
        return bucket.put_object(name, input).status

     

    展开全文
  • //注意formData里append添加的键的大小写 formData.append('key', qiniuyunToken.key) formData.append('token', qiniuyunToken.token) //如果是base64文件,那么直接把base64字符串转成blob对象进行上传就可以了 ...

    html

    <input @change="getpolicy($event)" type="file" accept=".png" :ref="refName" class="upInput" />
    

    js
    request是封装好的方法,qiniuyun是后端给的接口

      data() {
                return {
                    qiniuUploadURL: 'http://up-z2.qiniu.com',
                }
            },
      methods: {
          getpolicy() {
              request(qiniuyun).then((res) => {
                  if (res.code === "200") {
                      let files = this.$refs[this.refName].files
                      let length = files.length
                      for (let i = 0; i < length; i++) {
                          this.qiniuyunUpload(files[i], res.data)
    
                      }
                  }
              });
          },
          qiniuyunUpload(file, qiniuyunToken) {
              let formData = new FormData();
              //注意formData里append添加的键的大小写
              formData.append('key', qiniuyunToken.key)
              formData.append('token', qiniuyunToken.token)
              //如果是base64文件,那么直接把base64字符串转成blob对象进行上传就可以了
              formData.append("file", file);
              axios.post(this.qiniuUploadURL, formData, {
                  'Content-Type': 'multipart/form-data'
              }).then(res => {
                  if (res.data.code == "200") {
                      this.$util.message("suc", "上传成功");
                  } else {
                      this.$util.message("err", res.message);
                  }
              })
    
          },
      }
    
    展开全文
  • Vue实现文件上传文件下载

    万次阅读 多人点赞 2018-08-22 22:09:55
    文件下载: 文件下载通常有几种方法 1.通过url下载 2.location.href ...前端第一个实现是使用a标签, 第二种方式: 这个方法是直接把 DataURLs 或者 BlogURLs 传到浏览器地址中触发下载。有两种...
  • springboot整合vue实现上传下载文件

    万次阅读 多人点赞 2019-05-06 18:46:43
    springboot整合vue实现上传下载文件 文章目录springboot整合vue实现上传下载文件1上传下载文件api文件2.上传大文件配置3.vue前端主要部分 环境 springboot 1.5.x 完整代码下载: springboot整合vue实现上传下 1...
  • Vue实现上传下载文件操作1、上传操作利用Element实现上传组件,注意这块由于是独立于axios之外的请求,需要独立配置请求头,Element的Upload还需要将with-credentials设置为true这样上传文件的时候才会带上...
  • vue实现文件上传功能

    2021-01-19 17:22:17
    vue 文件上传,供大家参考,具体内容如下 首先 先说一下想要实现的效果 就如截图所见,需要将企业和需要上传文件提交到后台处理,那么接下来就说如何实现 vue 实现 vue 页面代码 ref=upload action=...
  • vue 文件上传,供大家参考,具体内容如下首先 先说一下想要实现的效果就如截图所见,需要将企业和需要上传文件提交到后台处理,那么接下来就说如何实现vue 实现vue 页面代码class="upload-demo"ref="upload"action...
  • vue实现文件上传文件下载 转载于:https://www.cnblogs.com/knuzy/p/9569167.html
  • 本文实例为大家分享了springboot+vue实现文件上传下载的具体代码,供大家参考,具体内容如下 一、文件上传(基于axios的简单上传) 所使用的技术:axios、springboot、vue; 实现思路:通过h5 :input元素标签进行...
  • vue实现文件上传

    万次阅读 2018-03-28 10:57:55
    文件上传的传统方式是通过 form 表单提交,但是今天我们将换一种方式来实现这个功能。同一口味的东西吃多了还会腻呢,所以适当的时候换一换口味还是有必要的,好了,直接进入正文。首先,来介绍一下我们今天的主角 -...
  • Vue实现文件上传

    2020-03-23 18:06:57
    Vue结合Vant进行文件上传 html: 调起手机文件夹及录像机上传视频: <van-uploader :after-read="afterRead" preview-size="38" upload-icon="plus" accept="video/*"> <span class="icon">&#xaa710;...
  • 主要介绍了node+vue实现文件上传功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue实现 上传并读取文件

    千次阅读 2019-12-05 21:18:37
    实现结果:可上传多个文件,点击可在下方查看,可删除 所用知识点: FileReader读取文件 FileReader官方可用四种方法读取文件。分别为readAsArrayBuffer(此方法用来将文件存储为二进制数据)、...
  • 样式使用的是vux的cell组件 如下图的官方demo样子上图的样式需要修改一下,把 保护中 修改成一个图片 并且内嵌一个input type=‘file'就可以拥有好看的样式的文件上传了import { Cell } from 'vux'下面我们要改造...
  • 本文实例为大家分享了vue实现文件上传读取及下载的具体代码,供大家参考,具体内容如下文件上传利用input标签的type="file"属性,读取用FileReader对象,下载通过创建a标签实现下载export default {data () {...
  • 在本文里小编给大家分享了一篇关于vue实现上传文件给后台的实例内容,有需要此功能的可以学习参考下。
  • 主要为大家详细介绍了vue实现文件上传读取及下载功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,860
精华内容 744
关键字:

vue实现上传文件

vue 订阅