龙空技术网

如何实现拖拽上传、上传进度条,以及取消上传?

前端阿飞V 331

前言:

而今姐妹们对“ajax上传文件及取消”大体比较注意,我们都想要了解一些“ajax上传文件及取消”的相关文章。那么小编也在网络上网罗了一些对于“ajax上传文件及取消””的相关知识,希望咱们能喜欢,咱们一起来学习一下吧!

文件上传是最常见的一种业务需求,上传功能可简单,可复杂,简单就是把文件传上去就行,复杂就是涉及大文件断点续传、控制并发等,不知道大家对上传都了解多少。今天要给大家分享的是上传需求中最为常见的一些场景,话不多说,开干:

拖拽上传

拖拽上传涉及到样式交互、文件信息获取,那么,我们首先了解一下拖拽相关的几个事件:

dragover - 被拖动的对象进入目标容器时触发dragleave - 被拖动的对象离开目标容器时触发drop - 被拖动的对象进入目标容器,释放鼠标键时触发

了解了这几个事件,再实现拖拽上传就相当容易了。先上效果图:

效果展示

当被拖动的对象进入目标容器时,容器边框变红。当拖出目标容器,或者释放鼠标键时,容器边框置灰。当释放鼠标键时,获取拖动对象的文件信息。

代码实现

<template>  <div ref="drag" class="drag">    <div class="drag-icon-box">      <!-- 采用的是 element-ui 的图标 -->      <i class="el-icon-upload"></i>     </div>    <div class="drag-message">      <span class="drag-message-title">将文件拖动到此处,或</span>      <label for="file" class="drag-message-label">        <input          class="drag-message-input"          type="file"          id="file"          name="file"          @change="handleFileChange"        />        <span class="drag-message-manual">点击上传</span>      </label>    </div>  </div></template><script>export default {  data() {    return {      file: null    }  },  async mounted() {    // 给容器绑定相关的拖拽事件    this.bindEvents()  },  methods: {    bindEvents() {      const drag = this.$refs.drag      // 被拖动的对象进入目标容器      drag.addEventListener('dragover', e => {        e.preventDefault()        drag.style.borderColor = 'red'      })      // 被拖动的对象离开目标容器      drag.addEventListener('dragleave', e => {        e.preventDefault()        drag.style.borderColor = '#eee'      })      // 被拖动的对象进入目标容器,释放鼠标键      drag.addEventListener('drop', e => {        e.preventDefault()        drag.style.borderColor = '#eee'        const fileList = e.dataTransfer.files        this.file = fileList[0]        this.uploadFile()      })    },    async uploadFile() {      const form = new FormData()      form.append('name', 'file')      form.append('file', this.file)      const res = await axios.post('/upload', form)    },    handleFileChange(e) {      const file = e.target.files[0]      if (!file) return      this.file = file      this.uploadFile()    }  }}</script><style lang="scss" scoped>.drag {  width: 660px;  height: 300px;  border: 2px dashed;  border-color: #a3a3a3;  border-radius: 5px;  margin: 0 auto;  display: flex;  flex-direction: column;  justify-content: center;  align-items: center;  flex-wrap: wrap;  .drag-icon-box {    width: 100%;    height: 60px;    text-align: center;    font-size: 50px;    line-height: 60px;    color: #606266;  }  .drag-message {    width: 100%;    height: 50px;    line-height: 50px;    text-align: center;    .drag-message-title {      font-size: 14px;      color: #606266;    }    .drag-message-label {      width: 120px;      height: 50px;      height: auto;      position: relative;      overflow: hidden;      .drag-message-input {        position: absolute;        left: -100px;        top: -100px;        z-index: -1;        display: none;      }      .drag-message-manual {        font-size: 14px;        color: #4b87ff;        cursor: pointer;      }    }  }}</style>
上传进度条

进度条可以说是最普遍的一种需求,特别是大文件上传的时候。实现方法也比较简单,利用 axios 的 onUploadProgress 方法就可以了。

效果展示代码实现

<div>  <!-- 采用的是 element-ui 的进度条组件 -->  <el-progress    :stroke-width="20"    :text-inside="true"    :percentage="uploadProgress"  ></el-progress></div><script>export default {  data() {    return {      file: null,      uploadProgress: 0    }  },  methods: {    async uploadFile() {      const form = new FormData()      form.append('name', 'file')      form.append('file', this.file)      const res = await axios.post('/uploadfile', form, {        onUploadProgress: progress => {          this.uploadProgress = Number(            ((progress.loaded / progress.total) * 100).toFixed(2)          )        }      })    },    handleFileChange(e) {      const file = e.target.files[0]      if (!file) return      this.file = file      this.uploadFile()    }  }}</script>
取消上传

当上传很慢等的捉急时,或者手一抖,上传了一个不该上传的视频(你懂的),在上传未完成的情况下,能否进行取消呢?答案当然是可以的。

效果展示

其实取消上传就是取消 ajax 请求,可以利用 axioscancel token 进行取消。

方法一:使用 CancelToken.source 工厂方法创建 cancel token

const CancelToken = axios.CancelToken;const source = CancelToken.source();axios.post('/upload', form, {  cancelToken: source.token})source.cancel();

方法二:通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token

const CancelToken = axios.CancelToken;let cancel;axios.post('/upload', form, {  cancelToken: new CancelToken(function executor(c) {    cancel = c;  })});cancel();

有兴趣的同学可以试一试,将以上方法融入到自己的项目中。

总结

ok,以上就是上传需求中最常见的一些场景,无论是拖拽上传还是粘贴上传,最主要的是通过相应的事件拿到文件信息。而进度条和取消上传则是利用 axiosapi 进行实现,axios 还有众多实用的配置选项,大家可以自己研究一哈。

如果文章对你有所帮助,不要忘了点个赞呦~

听说喜欢点赞的人运气都不差,相信今年的你一定逢考必过,逢奖必中!

标签: #ajax上传文件及取消 #ajax请求可以取消吗