关于vue.js:uniapp纯前端附件选择上传完善版

7次阅读

共计 1871 个字符，预计需要花费 5 分钟才能阅读完成。

心愿能帮到你！

应用插件有任何问题欢送退出 QQ 探讨群：701468256

属性	是否必填	值类型	默认值	阐明
width	否	String	100%	容器宽度
height	否	String	80rpx	容器高度
size	否	Number	10	附件大小下限 (M)
top,left,right,bottom	否	[Number,String]	0	设置控件相对地位，仅 App 端 position=absolute 时无效，其余端若须要相对定位可自行在外层设置 css position 款式
value	否	Number	0	上传进度，通过 v -model 双向绑定
childId	否	String	lsjUpload	控件的 id(仅 APP 无效，尽量每个控件命名一个惟一 Id)
position	否	String	static	控件的排版地位 (仅 APP 无效，static= 控件随页面滚动;absolute= 控件在页面中相对定位，不随窗口内容滚动;nvue 仅反对 absolute)
@input	否	Function	value	上传进度扭转时回调
@callback	是	Function	Object	上传胜利时回调

作用	办法	传入参数类型	阐明
创立文件管理器	create	Object	初始化上传文件须要的必备参数, 参数见下方函数阐明
敞开文件管理器	close	–	APP 端手动敞开 webview 层，用于切换 tab 视图, 可见示例我的项目

<lsj-upload 
ref="lsjUpload"
width="100px"
height="80rpx"
childId="upload"
:size="10"
v-model="percent"
@input="onInput"
@callback="onCallback">
    <view class="btn" style="height: 80rpx;"> 抉择附件上传 </view>
</lsj-upload>

函数阐明

/*  */
export default {data() {
        return {
            tabIndex: 0,
            percent: ''
        }
    },
    onReady() {
        // 初始化参数并创立上传 DOM
        this.onCreate();},
    methods: {
        // app 端切换 tab 示例
        onTab(tabIndex) {
            this.tabIndex = tabIndex;
            
            if (tabIndex == 0) {
                // 因为创立 webview 时须要获取按钮地位，所以须要 nextTick 后再从新调用 create
                this.$nextTick(()=>{this.onCreate();
                })
            }
            else {this.$refs.lsjUpload.close();
            }
            
        },
        onCreate() {
            // 初始化参数并创立上传 DOM
            this.$refs.lsjUpload.create({
                // #ifdef APP-PLUS
                cuWebview: this.$mp.page.$getAppWebview(), // app 必传
                // #endif
                url: 'https://www.example.com/upload', // 替换为你的接口地址
                name: 'file', // 附件 key
                size: 10, // 附件上传大小下限 (M)，默认 10M
                debug: true,
                // 依据你接口需要自定义申请头
                header: {'Authorization': 'token'},
                // 依据你接口需要自定义 body 参数
                formData: {'orderId': 1000}
            });
        },
        onInput(e) {console.log('上传进度',e);
        },
        onCallback(e) {console.log('上传后果',e);
        }
    }
}