vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)


Posted in Javascript onOctober 15, 2019

说在前面

网上有很多种文件上传的方法,根据公司最近的业务需求,要求实现多种文件的上传,在实现过程中,查阅了很多资料,最后,终于把功能实现了,开心!

<template>
  <div>
    <v-header :left-text="`上传${columnName}`"></v-header>

    <div class="upload">
      <div v-if="columnName === '视频'">
        <div class="forPreview_video" v-for="(item, index) in uploadVideoList" :key="index">
          <video :src="videoSrc"></video>
          <van-icon name="delete" @click="delBtn(index)" class="delte"/>
        </div>
        <van-uploader v-show="uploadVideoList.length < 2" preview-size="80px" accept="video/*" :before-read="beforeRead" :after-read="afterRead"></van-uploader>
      </div>

      <div v-if="columnName === '文档'">
        <div class="forPreview_doc" v-for="(item, index) in uploadDocList" :key="index">
          <img src="../../assets/img/resource_doc_b@2x.png" alt="">
          <span>{{item.name}}</span>
          <span>{{item.size | formatSize}}</span>
          <van-icon name="delete" @click="delBtn(index)" class="delte"/>
        </div>
        <van-uploader v-show="uploadDocList.length < 2" preview-size="80px" accept=".doc, .docx, .xml, .xlsx, .pdf" :before-read="beforeRead" :after-read="afterRead"></van-uploader>
      </div>

      <div v-if="columnName === '音频'">
        <div class="forPreview_audio" v-for="(item, index) in uploadAudioList" :key="index">
          <img src="../../assets/img/resource_audio@2x.png" alt="">
          <span>{{item.name}}</span>
          <span>{{item.size | formatSize}}</span>
          <van-icon name="delete" @click="delBtn(index)" class="delte"/>
        </div>
        <van-uploader v-show="uploadAudioList.length < 2" preview-size="80px" accept="audio/*" :before-read="beforeRead" :after-read="afterRead"></van-uploader>
      </div>

      <div v-if="columnName === '图片'">
        <div class="forPreview_pic" v-for="(item, index) in uploadPicList" :key="index">
          <img :src="picSrc" alt="">
          <van-icon name="delete" @click="delBtn(index)" class="delte"/>
        </div>
        <van-uploader v-show="uploadPicList.length < 2" accept="image/*" preview-size="80px" :before-read="beforeRead" :after-read="afterRead"></van-uploader>
      </div>

      <div class="diy-submit">
        <van-button @click="doSubmit($event)">提交</van-button>
      </div>
    </div>
  </div>
</template>

上述html代码是在同一页面根据前一页面传回的columnName的值来判断需要上传哪种类型文件。

<script>
  import VHeader from '../../common/header'
  import {classifyList, uploadFile, addResources} from '../../http/mock'
  import Toast from 'vant'
  export default {
    name: "uploadFile",
    components: {
      VHeader
    },
    data(){
      return{
        tagList: [], 
        uploadTitle: '',
        currentTag: null,
        tagId: null,
        columnName: localStorage.getItem('columnName'),
        fileIdArr: [],

        uploadVideoList: [], // 选中的上传视频列表
        videoSrc: '',  // 选中的视频的src,用来显示视频
        uploadDocList: [], // 选中的上传文档列表
        uploadAudioList: [], // 选中的上传音频列表
        uploadPicList: [], // 选中的上传图片列表
        picSrc: '', // 选中的图片的src,用来显示图片缩略图
      }
    },
    filters: {
      formatSize(val) { // 格式化文件大小
        if (val > 0) {
          return (val / 1024 / 1024).toFixed(2) + 'M';
        } else {
          return '0M';
        }
      },
    },
    methods: {
      // vant上传文件前校验文件事件
      // 文件选中后先提交给后台,后台根据选中的文件,返回数组(这一业务根据后台而定)
      beforeRead(file){
        let formData = new FormData(); // 为上传文件定义一个formData对象
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        };
        let uploadUrl = URL.createObjectURL(file); // 将选中的上传文件转化为二进制文件,显示在页面上
        if(this.columnName === '视频'){
          this.uploadVideoList.push(file);
          this.videoSrc = uploadUrl;
          // 这里使用foreach是为了将选中的多个文件都添加进定义的formdata变量中
          this.uploadVideoList.forEach(item => {
            formData.append(item.name, item)
          })
        }else if(this.columnName === '文档'){
          this.uploadDocList.push(file);
          this.uploadDocList.forEach(item => {
            formData.append(item.name, item)
          })
        }else if(this.columnName === '音频'){
          this.uploadAudioList.push(file);
          this.uploadAudioList.forEach(item => {
            formData.append(item.name, item)
          })
        }else if(this.columnName === '图片'){
          this.uploadPicList.push(file);
          this.picSrc = uploadUrl;
          this.uploadPicList.forEach(item => {
            formData.append(item.name, item)
          })
        }


        // formData.append(file.name, file); // 单个文件上传时可以这么写,上面的foreach就可以删掉
        this.$api.post(uploadFile, formData, config).then(res => {
          this.fileIdArr = res.data.data;  // 把?中的文件?魉徒o後台
        }).catch(err => {
          Toast('文件上?魇?。?)
        })
      },
      // 删除待上传的文件
      delBtn(index){
        if(this.columnName === '视频'){
          // 先判断当前的选中的索引是否是在有效范围中,如果不是则跳出方法 
          if(isNaN(index) || index >= this.uploadVideoList.length){
            return false;
          }
          let tmp = [];
          // 将没被选中的上传文件存放进一个临时数组中
          for(let i = 0; i < this.uploadVideoList.length; i++){
            if(this.uploadVideoList[i] !== this.uploadVideoList[index]){
              tmp.push(this.uploadVideoList[i]);
            }
          }
          // 存放当前未被选中的上传文件
          this.uploadVideoList = tmp;
        }

        if(this.columnName === '文档'){
          console.log(this.uploadDocList.length)
          if(isNaN(index) || index >= this.uploadDocList.length){
            return false;
          }
          let tmp = [];
          for(let i = 0; i < this.uploadDocList.length; i++){
            if(this.uploadDocList[i] !== this.uploadDocList[index]){
              tmp.push(this.uploadDocList[i]);
            }
          }
          this.uploadDocList = tmp;
        }

        if(this.columnName === '音频'){
          if(isNaN(index) || index >= this.uploadAudioList.length){
            return false;
          }
          let tmp = [];
          for(let i = 0; i < this.uploadAudioList.length; i++){
            if(this.uploadAudioList[i] !== this.uploadAudioList[index]){
              tmp.push(this.uploadAudioList[i]);
            }
          }
          this.uploadAudioList = tmp;
        }

        if(this.columnName === '图片'){
          if(isNaN(index) || index >= this.uploadPicList.length){
            return false;
          }
          console.log('uuu')
          let tmp = [];
          for(let i = 0; i < this.uploadPicList.length; i++){
            if(this.uploadPicList[i] !== this.uploadPicList[index]){
              tmp.push(this.uploadPicList[i]);
            }
          }
          this.uploadPicList = tmp;
        }
      },
      doSubmit(){
        let params = {
          classify: this.tagId,    // 针对视频资源时对应的分类id
          file: this.fileIdArr,  // 选择完文件后,调用uploadFile这个接口,后端返回的数组
          resourceColumnId: JSON.parse(localStorage.getItem('columnId')),  // 资源栏目id(视频、图片、音频、文档)
          title: this.uploadTitle  // 上传时填写的标题
        };
        let columnName = localStorage.getItem('columnName')
        this.$api.post(addResources, params).then(res => {
          if(res.data.code === 1001){
            if(columnName === '视频'){
              this.$router.push({name: 'myVideo'});
            }else {
              this.$router.push({name: 'myResourceClassify'});
            }
          }
        }).catch(err => {
          console.log(err)
        })
      },
    },
    mounted(){
      this.getClassifyList();
    }
  }
</script>
<style lang="less" scoped>
  .upload{
    padding: 140px 36px 160px 36px;
    box-sizing: border-box;
  }

  .forPreview_video{
    position: relative;
    /*background: rgba(0,0,0,.7);*/
    video{
      width: 95%;
      max-height: 430px;
    }
    .delte{
      position: absolute;
      right: 0;
      bottom: 0;
    }
  }
  .forPreview_doc, .forPreview_audio{
    display: flex;
    margin-bottom: 10px;
    align-items: center;
    img{
      width: 56px;
      height: 56px;
      margin-right: 20px;
    }
    span:nth-of-type(1){
      flex: 1;
    }
    span:nth-of-type(2){
      margin-right: 20px;
    }
  }
  .forPreview_pic{
    display: flex;
    align-items: flex-end;
    img{
      width: 160px;
      height: 160px;
    }
  }

  .diy-detail{
    width: 100%;
    overflow: hidden;
    
    .btn{
      span{
        margin-bottom: 10px;
      }
    }
    .van-cell{
      background-color: #F0F0F0;
      border-radius: 35px;
      font-size: 26px;
      height: 69px;
      line-height: 69px;
      padding: 0 22px;
      color: #999;
    }
    .van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after {
      border-width: 0;
    }
    p{
      height: 64px;
      line-height: 64px;
      font-size: 32px;
      color: #333;
      position: relative;
      padding-left: 16px;
    }
    p::before{
      position: absolute;
      top: 0;
      left: 0;
      content: '*';
      color: #FF0000;
    }

    span{
      display: inline-block;
      width: 157px;
      background: #F0F0F0;
      border-radius: 35px;
      color: #999;
      font-size: 26px;
      padding: 14px 18px;
      margin-right: 28px;
      text-align: center;
    }
    .active{
      color: #fff;
      background: linear-gradient(to right,#FD5130,#FA6C34);
    }
  }
  .diy-submit {
    position: fixed;
    height: 150px;
    width: 90%;
    bottom: 0;
    background: #fff;

    .van-button {
      width: 100%;
      height: 90px;
      border-radius: 45px;
      font-size: 36px;
      color: #fff;
      background: linear-gradient(to right, #FD5130, #FA6C34);
      top: 50%;
      transform: translate(0, -50%);
    }
    .van-button--default {
      border: none;
    }
  }
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery中实现标签切换效果的代码
Mar 01 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
Nov 06 Javascript
node.js中的fs.rename方法使用说明
Dec 16 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
js实现瀑布流的三种方式比较
Jun 28 Javascript
深入剖析JavaScript面向对象编程
Jul 12 Javascript
Bootstrap table简单使用总结
Feb 15 Javascript
js实现多行文本框统计剩余字数功能
Mar 28 Javascript
在一般处理程序(ashx)中弹出js提示语
Aug 16 Javascript
详解使用React制作一个模态框
Mar 14 Javascript
vue中axios的二次封装实例讲解
Oct 14 Javascript
如何手写一个简易的 Vuex
Oct 10 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
Oct 15 #Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
Oct 15 #Javascript
vue实现树形结构样式和功能的实例代码
Oct 15 #Javascript
谈谈IntersectionObserver懒加载的具体使用
Oct 15 #Javascript
js实现开关灯效果
Mar 30 #Javascript
JS实现灯泡开关特效
Mar 30 #Javascript
浅谈微信小程序列表埋点曝光指南
Oct 15 #Javascript
You might like
检测png图片是否完整的php代码
2010/09/06 PHP
php简单统计中文个数的方法
2016/09/30 PHP
PHP回调函数简单用法示例
2019/05/08 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
javascript编程起步(第四课)
2007/01/10 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
2014/03/21 Javascript
ajax提交表单实现网页无刷新注册示例
2014/05/08 Javascript
自编jQuery插件实现模拟alert和confirm
2014/09/01 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
javascript设计模式之对象工厂函数与构造函数详解
2015/07/30 Javascript
谈谈JavaScript异步函数发展历程
2015/09/29 Javascript
Vue渲染函数详解
2017/09/15 Javascript
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
jQuery操作动画完整实例分析
2020/01/10 jQuery
实现vuex原理的示例
2020/10/21 Javascript
[01:05]DOTA2完美大师赛趣味视频之选手教你打职业
2017/11/23 DOTA
Python实现注册登录系统
2017/08/08 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
django和vue实现数据交互的方法
2019/08/21 Python
python 实现屏幕录制示例
2019/12/23 Python
浅谈keras使用预训练模型vgg16分类,损失和准确度不变
2020/07/02 Python
如何基于Python pygame实现动画跑马灯
2020/11/18 Python
解决tensorflow模型压缩的问题_踩坑无数,总算搞定
2021/03/02 Python
CSS3 开发工具收集
2010/04/17 HTML / CSS
土耳其家居建材网站:Koçtaş
2016/11/22 全球购物
销售人员求职信
2014/07/22 职场文书
作息时间调整通知
2015/04/22 职场文书
黄埔军校观后感
2015/06/10 职场文书
2016年十一促销广告语
2016/01/28 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
小学生必读成语故事大全:送给暑假的你们
2019/07/09 职场文书
mybatis源码解读之executor包语句处理功能
2022/02/15 Java/Android