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

说在前面

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

<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;  // 把選中的文件傳送給後台
        }).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>

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

(0)

相关推荐

  • vue实现Excel文件的上传与下载功能的两种方式

    一.前言项目中使用到比较多的关于Excel的前端上传与下载,整理出来,以便后续使用或分析他人. 1.前端vue:模板下载与导入Excel 导入Excel封装了子组件,点击导入按钮可调用子组件,打开文件上传的对话框,上传成功后返回结果 <el-col style="padding: 10px 0 20px;"> <el-button class="pull-right" icon="el-icon-upload" type=&qu

  • vue项目中使用axios上传图片等文件操作

    axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 首先安装axios: 1.利用npm安装npm install axios –save 2.利用bower安装bower install axios

  • Vue封装一个简单轻量的上传文件组件的示例

    一.之前遇到的一些问题 项目中多出有上传文件的需求,使用现有的UI框架实现的过程中,不知道什么原因,总会有一些莫名其妙的bug.比如用某上传组件,明明注明(:multiple="false"),可实际上还是能多选,上传的时候依然发送了多个文件:又比如只要加上了(:file-list="fileList")属性,希望能手动控制上传列表的时候,上传事件this.refs.[upload(组件ref)].submit()就不起作用了,传不了.总之,懒得再看它怎么实现了,我

  • vue+vux实现移动端文件上传样式

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

  • vue实现文件上传功能

    vue 文件上传,供大家参考,具体内容如下 首先 先说一下想要实现的效果 就如截图所见,需要将企业和需要上传的文件提交到后台处理,那么接下来就说如何实现 vue 实现 vue 页面代码 <el-upload class="upload-demo" ref="upload" action="doUpload" :limit="1" :file-list="fileList" :before-upload

  • vue中实现图片和文件上传的示例代码

    html页面 <input type="file" value="" id="file" @change='onUpload'>//注意不能带括号 js代码 methods: { //上传图片 onUpload(e){ var formData = new FormData(); f ormData.append('file', e.target.files[0]); formData.append('type', 'test');

  • 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使用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.js异步上传文件前后端实现代码

    本文实例为大家分享了vue.js异步上传文件的具体代码,供大家参考,具体内容如下 上传文件前端代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8&qu

  • Vue axios 中提交表单数据(含上传文件)

    我们经常使用表单来上传数据,以及上传文件,那么怎么在表单提交成功的时候接受服务器的响应,并作出相应操作. 当然使用一般jQuery上传对象的格式也是可以的,如果使用传统的表单上传呢? <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport

随机推荐