精华内容
下载资源
问答
  • 主要介绍了Vue实现带进度条的文件拖动上传功能,本文通过实例代码给大家介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下
  • 基于vue实现拖拽上传

    2021-11-18 16:27:53
    this.dragover,false) } } 样式自行脑补 打印如下 实现的大体思路简单,主要就是监听了拖拽事件以及在拖拽的时候阻止浏览器的默认下载文件行为。在调取后端接口时传入datas参数。介于我的项目是需要上传word文件,只...

    html部分

    <template>
        <div class="page-draggle">
            <div :class="[borderhover?'draggle-area-active':'','draggle-area']" id="draggle-area">
                <input type="text" placeholder="摘要1">
                <input type="text" placeholder="摘要1">
                <input type="text" placeholder="摘要1">
                <input type="text" placeholder="摘要1">
                <div class="draggle-text">直接拖拽导入</div>
            </div>
        </div>
    </template>
    

    JS部分

    export default {
        data() {
            return {
                borderhover:false,
            }
        },
        methods:{
            dragenter(e){
                this.borderhover = true
                this.preventDefault(e)
            },
            dragleave(e){
                this.borderhover = false
                this.preventDefault(e)
            },
            dragover(e){
                this.borderhover = true
                this.preventDefault(e)
            },
            enentDrop(e){
                this.borderhover = false
                this.preventDefault(e)
                let fileData = e.dataTransfer.files;
                console.log(fileData);
                this.uploadFile(fileData)
            },
            preventDefault(e){
                e.stopPropagation();
                e.preventDefault();  //必填字段
            },
            uploadFile(file){
                let datas = new FormData();
                datas.append("file", file);
                console.log(file,'上传的文件,之后调用接口进行上传,入参的file为:'+datas,'文件类型为:'+file[0].type)
            }
        },
        mounted(){
            // 1.文件第一次进入拖动区时,触发 dragenter 事件
            // 2.文件在拖动区来回拖拽时,不断触发 dragover 事件
            // 3.文件已经在拖动区,并松开鼠标时,触发 drop 事件
            // 4.文件在拖动区来回拖拽时,不断触发dragleave 事件 
            var dropbox = document.getElementById('draggle-area');
            dropbox.addEventListener("drop",this.enentDrop,false)
            dropbox.addEventListener("dragleave",this.dragleave,false)
            dropbox.addEventListener("dragenter",this.dragenter,false)
            dropbox.addEventListener("dragover",this.dragover,false)
        }
    }
    

    样式自行脑补

    简单的样式

    打印如下控制台打印

    实现的大体思路简单,主要就是监听了拖拽事件以及在拖拽的时候阻止浏览器的默认下载文件行为。在调取后端接口时传入datas参数。介于我的项目是需要上传word文件,只需通过判断type做拦截即可!

    展开全文
  • 主要介绍了Vue2.0结合webuploader实现文件分片上传功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • 点我,去大佬博客看看

    点我,去大佬博客看看

    展开全文
  • vue项目实现文件拖拽上传

    千次阅读 2020-06-01 15:06:16
    1、基本代码 <template> ... 三,处理拖动上传文件 this.dropEvent函数写在项目methods:{}里,监听事件会有文件回调 e.dataTransfer 可以了解到,拖动到浏览器的每个文件都是一个 File 对象。

    1、基本代码

    <template>
    	<div id="drop-area" :class="dropActive ? 'drop-active' : ''">
    	</div>
    </template>
    <script>
    export default {
    	name:'index',
    	data(){
    		return {
    			dropActive:false
    		}
    	},
    	methods:{
    	 	dropEvent(e) {
    	        this.dropActive = false
    	        e.stopPropagation()
    	        e.preventDefault()
    	        this.uploadFile(e.dataTransfer.files)
    	    },
    	    uploadFile (file) { // 渲染上传文件
    	      console.log(file[0], 'file')
    	      if (file && file.length) {
    	        //自行发挥,存本地或上传服务器   
    	      }
    	    },
    	},
    	mounted () {
    		let dropArea = document.getElementById('drop-area')
    	    dropArea.addEventListener('drop', this.dropEvent, false)
    	    dropArea.addEventListener('dragleave', (e) => {
    	      e.stopPropagation()
    	      e.preventDefault()
    	      this.dropActive = false
    	    })
    	    dropArea.addEventListener('dragenter', (e) => {
    	      e.stopPropagation()
    	      e.preventDefault()
    	      this.dropActive = true
    	    })
    	    dropArea.addEventListener('dragover', (e) => {
    	      e.stopPropagation()
    	      e.preventDefault()
    	      this.dropActive = true
    	    })
    	}
    }
    <script>
    <style scoped>
    #drop-area{
    	width:300px;
    	height:300px;
    	background-color:#fff;
    	border:1px solid red;
    }
    .drop-active{
    	background-color: rgba(231,234,246,0.8);
    }
    </style>
    

    二,监听拖动事件
    让vue支持文件拖拽,写在vue的mounted(){}里面,将文件拖动到区域(这里的区域就是id=“drop-area”),监听区域拖动事件
    说明:
    1、文件第一次进入拖动区时,触发 dragenter 事件
    2、文件在拖动区来回拖拽时,不断触发 dragover 事件
    3、文件已经在拖动区,并松开鼠标时,触发 drop 事件
    4、文件在拖动区来回拖拽时,不断触发dragleave 事件 //拖后放
    实现拖动上传,我们只需要关心 drop 事件。不过另外三个事件也需要监听,目的是阻止浏览器默认行为。如果不阻止,那么把文件拖到浏览器时,浏览器就会自动下载这个文件(默认行为),drop 事件触发不出来。

    三,处理拖动上传文件
    this.dropEvent函数写在项目methods:{}里,监听事件会有文件回调 e.dataTransfer
    可以了解到,拖动到浏览器的每个文件都是一个 File 对象。

    展开全文
  • 一个文件上传Vue2插件,可以拖动文件或在对话框中选择要上传文件
  • vue 文件拖拽上传

    2020-12-30 11:08:06
    return if (file.size > this.MAX_FILE_SIZE) { return alert('文件大小不能超过10M') } this.batchFile = file this.fileName = file.name // 清空,防止上传后再上传没有反应 e.target.value = '' }, // 拖拽上传 ...

    在这里插入图片描述

    <template>
      <div id="app">
        <div class="content">
          <div class="drag-area" @dragover="fileDragover" @drop="fileDrop">
            <div v-if="fileName" class="file-name">{{ fileName }}</div>
            <div v-else class="uploader-tips">
              <span>将文件拖拽至此,或</span>
              <label for="fileInput" style="color: #11A8FF; cursor: pointer">点此上传</label>
            </div>
          </div>
        </div>
     
        <div class="footer">
          <input type="file" id="fileInput" @change="chooseUploadFile" style="display: none;">
          <label for="fileInput" v-if="fileName" style="color: #11A8FF; cursor: pointer">选择文件</label>
     
          <button @click="uploadOk">提交</button>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          fileName: '',
          batchFile: '',
          MAX_FILE_SIZE: 10 * 1000 * 1000
        }
      },
      methods: {
        // 点击上传
        chooseUploadFile (e) {
          const file = e.target.files.item(0)
    
          if (!file) return
          if (file.size > this.MAX_FILE_SIZE) {
            return alert('文件大小不能超过10M')
          }
    
          this.batchFile = file
          this.fileName = file.name
    
          // 清空,防止上传后再上传没有反应
          e.target.value = ''
        },
        // 拖拽上传
        fileDragover (e) {
          e.preventDefault()
        },
        fileDrop (e) {
          e.preventDefault()
          const file = e.dataTransfer.files[0] // 获取到第一个上传的文件对象
          console.log(file)
          console.log('拖拽释放鼠标时')
    
          if (!file) return
          if (file.size > this.MAX_FILE_SIZE) {
            return alert('文件大小不能超过10M')
          }
    
          this.batchFile = file
          this.fileName = file.name
        },
        // 提交
        uploadOk () {
          if (this.batchFile === '') {
            return alert('请选择要上传的文件')
          }
    
          let data = new FormData()
          data.append('upfile', this.batchFile)
    
          // ajax
        }
      }
    
    }
    </script>
    
    <style lang="less" scoped>
        * {
          font-size: 14px;
        }
        .drag-area {
          height: 200px;
          width: 300px;
          border: dashed 1px gray;
          margin-bottom: 10px;
          color: #777;
        }
        .uploader-tips {
          text-align: center;
          height: 200px;
          line-height: 200px;
        }
        .file-name {
          text-align: center;
          height: 200px;
          line-height: 200px;
        }
    </style>
    
    展开全文
  • vue拖拽上传文件实践

    千次阅读 2019-07-23 17:52:31
    最近有一个上传文件的需求,后来琢磨了半天,上网查找资料,最后终于做出来了。 组件编写 首先,写一个简单的拖拽页面。 <div class="upload"> 拖拽上传 </div> 给一点样式 .upload { margin: 100px...
  • 采用 大文件分片并发上传 ,极大的提高了文件上传效率。 分片、并发 分片 与 并发 结合,将一个大文件分割成多块, 并发上传 ,极大地提高大文件上传速度。 当 网络问题 导致传输错误时,只需要 重传出错分片 ,而...
  • vue_upload图片上传支持拖拽vue_upload图片上传支持拖
  • 需求页面中增加下载示例按钮实现一块区域能够拖拽上传word文件,限制文件大小2MB和文件类型,能显示进度条,同时支持取消上传文件下载业务中要求的是示例放在静态文件夹中,并不需要请求后台。针对这种场景,笔者...
  • 引入vue静态js,实现vue附件点击上传拖拽上传
  • v-uploader一个Vue2插件使文件上传变得更容易,更容易,通过图像预览上传单个文件,通过拖放进行多个上传示例和D v-uploader一个Vue2插件使文件上传变得简单而又容易,通过图像预览来单个文件上传,多个拖放式上传...
  • Vue实现带进度条的文件拖动上传

    千次阅读 2018-02-22 17:36:15
    Vue实现带进度条的文件拖动上传 1. 基本界面 <!doctype html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-...
  • 拖动上传 拖动目录 同时上传多个文件 html4(IE 9) PUT方法 自定义过滤器 缩图 块上传 例 安装 npm install vue-upload-component --save Vue3 npm install vue-upload-component@next --save 文献资料 ...
  • 安装vuedraggable插件 npm install vuedraggable ...图片上传代码 <el-form-item label="商品图片" :rules="{required: true}"> <div class="deviceinfo-box"> <div class="deviceinfo-box-item"&
  • <template> <div> <divstyle="width:100%;"> <divclass="upload-demo"id="drop_area"> <iclass="el-icon-uploadmg-r-5"></i>...将文件拖到此处,或<span...
  • vue-upload-component Vue.js file upload component The component is just a button Multi-file upload Upload directory Drag upload Drag the directory Upl vue-upload-component Vue.js file upload ...
  • 文件不是必传的,表单数据和文件要传递给后端是在一个接口中实现,前端要如何把数据传递给后端?
  • vue中element-ui文件拖拽上传

    千次阅读 2020-05-25 11:28:55
    --上传文件弹窗--> <el-dialog title="导入文件" name="上传的文件" :visible.sync="uploadFileDialog" :modal-append-to-body="false" width="573px"> <el-row> <el-col:span=...
  • 参考文献 ...主要是自动上传 点击按钮之后选择文件之后变上传(不需要点击其他上传按钮) <el-upload action="#" :limit="limitNum" :auto-upload="true" :before-upload="handleBeforeUpload
  • vue 实现文件上传

    2020-11-14 18:53:21
    (一)首先实现html、css布局 代码: <template> <div class="image-uploader"> <img :src="uploadIcon" class="icon"/> <p>Drag your images here</p> <p>OR</p&...
  • vue拖拽上传文件

    2019-12-11 11:47:26
    把要上传文件拖动到这里 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...
  • 支持拖拽文件、文件夹上传 可暂停、继续上传 错误处理 支持“秒传”,通过文件判断服务端是否已存在从而实现“秒传” 分块上传 支持进度、预估剩余时间、出错自动重试、重传等操作 读这篇文章之前,建议先读一遍...
  • 首先先创建元素容器 ...拖拽图片/文件上传</span> <img src="" alt="" class="up-img" v-show="!isUpload" /> </div> </template> 写好元素样式 <style scoped lang="scss"&
  • 之前公司的上传都是用的基于Vue的插件,直到最近一次需要多文件上传才发现,事情不是那么简单。 虽然操作你看着是一次选中了多个文件,其实!!!在前端它还是循环一次一个文件上传到后台的!!! 不适用于我新...
  • Vue.js文件上传组件,多文件上传,上传目录,拖动上传,拖动目录,同时上传多个文件,html4(IE 9),`PUT`方法,自定义过滤器

空空如也

空空如也

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

vue实现拖拽上传文件

vue 订阅