vuevantUI实现文件（图片、文档、视频、音频）上传（多文件）_vant上传视频,vant视频上传

201 浏览量更新于2023-03-16 评论收藏 60KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

主要介绍了vue vantUI实现文件（图片、文档、视频、音频）上传（多文件），文中通过示例代码介绍的非常详细，对大家的学习或

者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

说在前面说在前面

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

开心！

<div>

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

<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>

<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>

<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>

<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>

<van-button @click="doSubmit($event)">提交</van-button>

</div>

</template>

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

import VHeader from '../../common/header'

import {classifyList, uploadFile, addResources} from '../../http/mock'

import Toast from 'vant'

export default {

name: "uploadFile",

components: {

VHeader