uni-app 上传文件支持h5支持Android 组件封装利用uni中的renderjs

原创

已于 2023-11-30 10:57:58 修改 · 776 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #android #javascript

于 2023-11-30 10:54:15 首次发布

本文介绍如何在uni-app中封装一个适用于H5和Android的文件上传组件，利用uni的renderJS技术来实现跨平台操作。

在这里插入图片描述

手机端选择效果图
在这里插入图片描述
页面样式效果

<template>
	<view class="">
		<view v-show="isduan == 'web'" class="uploadbox" @click="upload" >
			<view class="addfont">
				+
			</view>
		</view>
		<view v-show="isduan == ''"  class="uploadbox" @click="test.onClick" :prop="option" :change:prop="test.updateInput"   >
			<view class="addfont">
				+
			</view>
		</view>
		<view ref="input" id="input" class="" style="opacity: 0;height: 0;">

		</view>
		<view class="fileList">
			<view class="fileitem" v-for="(item,index) in fileList" :key="index">
				<view class="fonts">{
  
  {item.originalFileName}}</view>
				<u-button shape="square" size="mini" class="btns" @click="delBtn(index)">删除</u-button>
			</view>
		</view>
		<!-- 进度条 -->
		<view class="linebox" v-if="ispercentage">
			<u-line-progress active-color="#2979ff" :percentage="percentage" :striped-active="true"></u-line-progress>
		</view>
	</view>
</template>

<script>
	import result from "@/utils/config.js";
	import {
		removFile,
	} from "../../service/index.js"
	export default {
		components: {
		},
		props: {
			type: {
				type: String,
				default: '1'
			}
		},
		data() {
			return {
				percentage: 0,
				ispercentage: false,
				fileList: [],
				videoLis