Vue实现带进度条的文件拖动上传功能

2024-10-03 13:02:35

1. 基本界面

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
 <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
 <style>
  .dropbox {
   border: .25rem dashed #007bff;
   min-height: 5rem;
  }
 </style>
 <title>Document</title>
</head>
<body>
<div id="app" class="m-5">
 <div class="dropbox p-3">
  <h2 class="text-center">把要上传的文件拖动到这里</h2>
 </div>
</div>
<script>
 new Vue({
  el: '#app',
  data: {},
  methods: {},
  mounted: function () {}
 });
</script>
</body>
</html>

2. 检测拖动事件

首先让页面支持文件拖拽，在 Vue 的 mounted() 函数中添加代码：

mounted: function () {
 var dropbox = document.querySelector('.dropbox');
 dropbox.addEventListener('dragenter', this.onDrag, false);
 dropbox.addEventListener('dragover', this.onDrag, false);
 dropbox.addEventListener('drop', this.onDrop, false);
}

当把文件拖动到浏览器的拖动区域时，会触发三种事件：

文件第一次进入拖动区时，触发 dragenter 事件
文件在拖动区来回拖拽时，不断触发 dragover 事件
文件已经在拖动区，并松开鼠标时，触发 drop 事件

实现拖动上传，我们只需要关心 drop 事件。不过另外两个事件也需要监听，目的是阻止浏览器默认行为。如果不阻止，那么把文件拖到浏览器时，浏览器就会自动下载这个文件（默认行为），drop 事件触发不出来。

事件的监听函数添加在 Vue 的 methods 对象中：

methods: {
 uploadFile: function (file) {
  console.log(file);
 },
 onDrag: function (e) {
  e.stopPropagation();
  e.preventDefault();
 },
 onDrop: function (e) {
  e.stopPropagation();
  e.preventDefault();
  var dt = e.dataTransfer;
  for (var i = 0; i !== dt.files.length; i++) {
   this.uploadFile(dt.files[i]);
  }
 }
},

onDrop() 函数中，通过 e.dataTransfer.files 可以拿到用户拖动到浏览器的文件的基本信息，uploadFile() 函数现在只这些信息打印了出来，可以了解到，拖动到浏览器的每个文件都是一个 File 对象：

3. 处理拖动事件

现在，我们要给 uploadFile() 函数增加功能，实现拖动文件时，拖动区出现文件名和一个上传进度条。

首先在 Vue 的 data 对象中定义 files 属性，用来保存所有拖动到浏览器中文件的名称。然后在uploadFile() 函数每当被调用时，把文件名和上传进度保存到 files 中：

data: {
 files: []
},
methods: {
 uploadFile: function (file) {
  var item = {
   name: file.name,
   uploadPercentage: 67
  };
  this.files.push(item);
 },
}

上传进度的功能在后面再介绍，先写一个固定值。

相应地，在HTML代码中，用 v-for 关键字显示 files 的每一项：

<div class="dropbox p-3">
 <h2 class="text-center">把要上传的文件拖动到这里</h2>
 <div class="border m-2 d-inline-block p-4" style="width:15rem" v-for="file in files">
  <h5 class="mt-0">{{ file.name }}</h5>
  <div class="progress">
   <div class="progress-bar progress-bar-striped"
     :style="{ width: file.uploadPercentage+'%' }"></div>
  </div>
 </div>
</div>

而且，“把要上传的文件拖动到这里” 的提示只在拖动区没有文件的时候才显示：

<h2 v-if="files.length===0" class="text-center">把要上传的文件拖动到这里</h2>

这样，拖动效果就有了：

4. 文件上传

接下来实现真正的文件上传，继续往 uploadFile() 函数添加代码：

uploadFile: function (file) {
 var item = {
  name: file.name,
  uploadPercentage: 67
 };
 this.files.push(item);
 var fd = new FormData();
 fd.append('myFile', file);

 var xhr = new XMLHttpRequest();
 xhr.open('POST', 'upload.php', true);
 xhr.send(fd);
},

这里用到了 FormData，把要上传的文件附在了 FormData 上，并通过AJAX方式发送给PHP端。PHP端代码：

if (isset($_FILES['myFile'])) {
 move_uploaded_file($_FILES['myFile']['tmp_name'], 'uploads/' . $_FILES['myFile']['name']);
 echo 'OK';
} else {
 echo 'No file specified';
}

现在刷新下页面，把电脑上的两个文件拖到浏览器中，PHP端会接收并保存文件到 uploads 目录：

提示：如果拖放时遇到PHP返回了No file specified，或者 $_FILES 为 NULL 的情况时，有可能是PHP限制了POST请求最大字节，或者限制了上传文件的体积。这时候需要调整下php.ini中的这两个配置：

post_max_size = 20M // POST请求的最大字节数
upload_max_filesize = 20M // 上传文件的最大体积

进度条的展示

基本的上传功能完成了，最后我们来完成进度条。每当AJAX请求发送了一段时间的数据时，都会生成一个 progress 事件，我们可以监听 progress 事件来知道当前的上传进度：

uploadFile: function (file) {
  ...
  xhr.upload.addEventListener('progress', function (e) {
    item.uploadPercentage = Math.round((e.loaded * 100) / e.total);
  }, false);
  xhr.send(fd);
},

e.loaded 代表当前AJAX发送了多少字节，e.total 代表AJAX总共要发送多少字节。通过这两个属性可以计算上传进度的百分比。

这样，一个带进度条的文件拖动上传功能就完成了。

附：完整代码

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
  <style>
    .dropbox {
      border: .25rem dashed #007bff;
      min-height: 5rem;
    }
  </style>
  <title>Document</title>
</head>
<body>
<div id="app" class="m-5">
  <div class="dropbox p-3">
    <h2 v-if="files.length===0" class="text-center">把要上传的文件拖动到这里</h2>
    <div class="border m-2 d-inline-block p-4" style="width:15rem" v-for="file in files">
      <h5 class="mt-0">{{ file.name }}</h5>
      <div class="progress">
        <div class="progress-bar progress-bar-striped"
           :style="{ width: file.uploadPercentage+'%' }"></div>
      </div>
    </div>
  </div>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      files: []
    },
    methods: {
      uploadFile: function (file) {
        var item = {
          name: file.name,
          uploadPercentage: 0
        };
        this.files.push(item);
        var fd = new FormData();
        fd.append('myFile', file);
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'upload.php', true);
        xhr.upload.addEventListener('progress', function (e) {
          item.uploadPercentage = Math.round((e.loaded * 100) / e.total);
        }, false);
        xhr.send(fd);
      },
      onDrag: function (e) {
        e.stopPropagation();
        e.preventDefault();
      },
      onDrop: function (e) {
        e.stopPropagation();
        e.preventDefault();
        var dt = e.dataTransfer;
        for (var i = 0; i !== dt.files.length; i++) {
          this.uploadFile(dt.files[i]);
        }
      }
    },
    mounted: function () {
      var dropbox = document.querySelector('.dropbox');
      dropbox.addEventListener('dragenter', this.onDrag, false);
      dropbox.addEventListener('dragover', this.onDrag, false);
      dropbox.addEventListener('drop', this.onDrop, false);
    }
  });
</script>
</body>
</html>

总结

以上所述是小编给大家介绍的Vue实现带进度条的文件拖动上传功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

您可能感兴趣的文章:

vue使用axios实现文件上传进度的实时更新详解
vue webuploader 文件上传组件开发
vue+vux实现移动端文件上传样式
vue中用H5实现文件上传的方法实例代码

vue使用axios实现文件上传进度的实时更新详解

axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求支持 Promise API 拦截请求和响应转换请求和响应数据取消请求自动转换JSON数据客户端支持防止 CSRF/XSRF 引入方式: $ npm install axios //使用淘宝源 $ cnpm install axios //或者使用cdn: <script s
vue中用H5实现文件上传的方法实例代码

整理文档,搜刮出一个vue中用H5实现文件上传的方法实例代码,稍微整理精简一下做下分享. 1.图片上传 <img v-if="personInfo.photoUrl" :src="headPreFix + personInfo.photoUrl" style="height:126px;max-width:133px;margin: 25px 0;"> <img v-else src="../../assets/def
vue+vux实现移动端文件上传样式

样式使用的是vux的cell组件如下图的官方demo样子上图的样式需要修改一下,把保护中修改成一个图片并且内嵌一个input type='file' 就可以拥有好看的样式的文件上传了  import { Cell } from 'vux'  <group> <cell title="title" value="value"></cell>
vue webuploader 文件上传组件开发

最近项目中需要用到百度的webuploader大文件的分片上传,对接后端的fastdfs,于是着手写了这个文件上传的小插件,步骤很简单,但是其中猜到的坑也不少,详细如下: 一.封装组件引入百度提供的webuploader.js.Uploader.swf css样式就直接写在组件里面了 <template> <div> <div id="list" class="uploader-list"></div> <di
Vue实现带进度条的文件拖动上传功能

1. 基本界面 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1
jquery插件uploadify实现带进度条的文件批量上传

有时项目中需要一个文件批量上传功能时,个人认为uploadify是快速简便的解决方案,分享给大家供大家参考,具体如下先上效果图: 具体代码如下: 在页面中如下完整页面代码 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <
Vue2.0结合webuploader实现文件分片上传功能

Vue项目中遇到了大文件分片上传的问题,之前用过webuploader,索性就把Vue2.0与webuploader结合起来使用,封装了一个vue的上传组件,使用起来也比较舒爽. 上传就上传吧,为什么搞得那么麻烦,用分片上传? 分片与并发结合,将一个大文件分割成多块,并发上传,极大地提高大文件的上传速度. 当网络问题导致传输错误时,只需要重传出错分片,而不是整个文件.另外分片传输能够更加实时的跟踪上传进度. 实现后的界面: 主要是两个文件,封装的上传组件和具体的ui页面,上传组件代码下面有列出来
Android带进度条的文件上传示例（使用AsyncTask异步任务）

最近项目中要做一个带进度条的上传文件的功能,学习了AsyncTask,使用起来比较方便,将几个方法实现就行,另外做了一个很简单的demo,希望能对大家有帮助,在程序中设好文件路径和服务器IP即可. demo运行截图: AsyncTask是抽象类,子类必须实现抽象方法doInBackground(Params... p),在此方法中实现任务的执行工作,比如联网下载或上传.AsyncTask定义了三种泛型类型Params,Progress和Result. 1.Params 启动任务执行的输入参数,比
vue结合el-upload实现腾讯云视频上传功能

起因根据需求要实现一个视频上传功能,之前采用七牛云上传,小点视频没问题,大体积视频比如600M左右,再考虑到网速等其他原因就会花费半个小时左右. 后来分析到不仅要考虑上传时间的问题,更重要的是要考虑用户使用4G 网络的情况,考虑用户的流量,线上的视频,不能不做压缩转码,就放到页面上,视频不是图片,不能甩到 cdn 上就行了. 要考虑视频大小,pc 移动端适配,转码,还有防盗版等问题. 最终决定使用腾讯云上传视频,我的项目是web端上传,参考以下链接官网链接:cloud.tencent.com
Jeeplus-vue 实现文件的上传功能

前端一.uploadList.vue ① 首先在页面中添加一个放置图片的位置,来展示图片 <el-table-column prop="upload" label="高校证明材料"> <template slot-scope="scope" v-if="scope.row.upload"> <el-image style="height: 30%;width:30%;margin-le
asp.net利用ashx文件实现文件的上传功能

原来以为文件上传是一个比较简单的功能,结果搞了一个晚上才搞定~这里主要介绍两种方法实现. 方法一:Form表单提交 html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>上传文件</title> <script src="Scripts/jquery-1.11.3.min.js"></scri
java实现文件的上传功能

本文实例为大家分享了java实现文件的上传功能的具体代码,供大家参考,具体内容如下直接上代码了一.上传界面 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN&qu
node.js实现带进度条的多文件上传

用node.js实现多文件上传并携带进度条的demo,供大家参考,具体内容如下这个独立封装的需求来自一个朋友公司,他说需要写一个带进度条动画的批量上传文件的组件,结果他们后端跟他说不能多文件上传,我一听就很尴尬了,怎么可能不能多文件呢哈哈,后来我只是告诉他进度条的实现方式,在过了2天后我一直对此事耿耿于怀,所以干脆自己动手用node写了一个多文件上传的demo,并记录下来. 前端: http请求为自己封装的一个原生请求函数,一切以原生代码为主: 后端(nodeJs): express + mu
asp.net单文件带进度条上传的解决方案

最近做项目中遇到很多问题,比如带进度条的文件上传,看了网上很多资料还没找到真正意义上的ASP.NET实现进度条上传(可能是我没找到),下面我来跟大家分享一下我实现的这个程序. 首先看下界面效果,当然你可以完全修改界面为你自己所用. 先解释一下这个程序,该程序采用了jquery框架,实现了小文件上传,不超过80Mb,可以在web.config文件中进行相应的配置,但是有个最大值,具体需要查看msdn.开发环境采用visual studio 2013 .net framework 4.5,运行的时候

Vue实现带进度条的文件拖动上传功能

您可能感兴趣的文章:

相关推荐

随机推荐