对于iview框架的上传文件(上传到阿里)进行改进(上传大小到无限不经过后台)

最新推荐文章于 2023-08-22 20:39:28 发布

maple_and_sakura

最新推荐文章于 2023-08-22 20:39:28 发布

阅读量441

点赞数 1

文章标签： upload less javascript vue.js

本文链接：https://blog.youkuaiyun.com/maple_and_sakura/article/details/107566867

版权

本文介绍如何使用iview框架实现文件上传功能，优化点在于允许上传无限大小的文件，并且直接上传到阿里云，无需经过后台处理。详细探讨了javascript和vue.js在上传过程中的应用，以及less样式的调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//子组件
<template>
    <div>
        <div style="display: flex;">
            <Input :value="currentValue" type="text" clearable  placeholder="请输入视频链接" />
            <div class="upload ivu-upload" @click="clikcssfd">
                <div class="ivu-upload ivu-upload-select">
                <input ref="input" @change="doUpload"  type="file" accept=".mp4,  .mov, .3gp" class="ivu-upload-input"> 
                <button type="button" class="ivu-btn ivu-btn-default">
                <i class="ivu-icon ivu-icon-ios-cloud-upload-outline"></i> 
                <span>上传视频</span>
                </button>
                </div>
            </div>
        </div>
        <Progress class="progress_tx" :percent="percentage" status="normal" :text-inside="false" :stroke-width="5"/>
    </div>
</template>
<script>
//ali-oss 依赖自己补
import OSS from 'ali-oss';
export default {
   
    n