1.uniapp原生上传图片官网https://uniapp.dcloud.io/api/media/image?id=chooseimage

2.利用uviewUI框架实现上传图片

2.2.1uview官网https://www.uviewui.com/components/install.html

2.2.2去uview找到上传图片的组件进行使用

<view>
//根据自己项目的需求写事件 如何使用具体看官网<u-uploadref="uUpload":action="action" //后端给的接口，请求服务器:max-size="8 * 1024 * 1024" //选择单个文件的最大大小，单位B(byte)，默认不限制 :size-type="sizeType"  //original 原图，compressed 压缩图，默认二者都有，H5无效:show-progress="progress" //是否显示进度条 @on-progress="change()"  //图片上传后，无论成功或者失败都会触发@on-success="success()" //成功返回的数据@on-remove="remove()"  //删除图片@on-choose-complete="comp(index)" //每次选择图片后触发/>
</view><script>
export default{data(){return{action: 'http://www.example.com/upload',sizeType:['compressed '],//压缩图progress:false,}   },
methods:{//   上传成功后的回调 根据实际需求进行编写success(res, i, lists, name) {if (res.code === '000000') {uni.showToast({title: res.msg,});}},}}
</script>

2.2.3效果图

---------------------------------分割线------------------------------

1.上传视频参考官网 https://uniapp.dcloud.io/component/video

<template><view v-show="showUpload"><video :src="src" class="videoshow" direction="90" auto-pause-if-open-native="true" /></view><view class="video_content" @click="videoUpload()"><view class="videoBox"><z-icon icon="z-cross" size="60rpx" color="#2b71ff" /></view></view>
</template><script>export default {name: 'MyVideo',data() {return{showUpload: false,  src:""}  },
methods:{videoUpload() {this.showUpload = true;const that = this;//   选择视频uni.chooseVideo({sourceType: ['album', 'camera'], // 类型[相册,照相机]compressed: true, // 是否压缩上传的视频camera: 'back',success: async function(res) {//   console.log('__res', res);uni.showLoading({title: '上传中请稍后',});that.src = res.tempFilePath;//   await that.upload(res.tempFilePath);uni.uploadFile({url: 'https/v1/customer/upFile',filePath: res.tempFilePath,name: 'file',success: (reslove) => {const _res = JSON.parse(reslove.data);console.log('res', _res);}, complete: function(resject) {uni.hideLoading();},});},});},}}
</script>
<style>.videoshow{width:100%;;}
.video_content{background-color:#d5e0ee;margin-left:30rpx;width:200rpx;height: 200rpx;}.videoBox{line-height: 200rpx;text-align: center;}
</style>

1.1效果图前/后

小程序上传图片/上传视频相关推荐

微信小程序实现上传视频功能（后端代码是java）
微信小程序实现上传视频功能(后端代码是java) 1.前端 wxml文件 <image bindtap="uploadVideo" length="3" ...
微信小程序实现上传视频 / 上传图片功能以及整合上传视频 / 上传图片功能(超详细)
微信小程序有自己封装好的我们直接拿过来用就可以了接下来我们看看如何实现的吧上传图片功能效果如下: 单图上传 Page({/*** 页面的初始数据*/data: {imgList: "& ...
微信小程序同时上传视频和图片（支持多选）
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言二.使用步骤 1.小程序页面代码 2.小程序JS内代码总结前言随着小程序的的不断发展,小程序技术也越来越广泛了, ...
ios微信本地视频上传到服务器,小程序 ios上传视频的问题
微信小程序做了个视频上传的功能,上传视频到七牛云安卓没有任何问题 ios就有问题了 ios下如果从相册选择视频上传之后提示上传成功了,但是跳转不了页面,但是如果直接拍摄的视频上传之后可以正常跳转页面 ...
微信小程序实现上传视频功能
首先我们先来编写一个上传视频的函数 _skipArtileList:throttle(function(e){let that=this wx.chooseMedia({count: 1, //上传 ...
小程序一次性上传多个本地图片，上拉加载照片以及图片加载延迟解决之道
一:小程序之一次性上传多个本地相片最近由于项目需要所以学了下小程序,也做了一些东西,随后便有了以下的一些总结了,现在说说如何使用小程序一次性上传多个本地相片. 问题描述最近做项目的时候要实现一个上 ...
微信小程序直接上传文件到阿里云OSS组件封装
微信小程序直接上传文件到OSS 1. 封装公共方法在根目录utils目录新建一个upload文件夹: // utils/upload/base64.jsvar base64EncodeChars = ...
【微信小程序】上传文件到阿里云OSS
小程序上传文件到OSS也是利用OSS提供的PostObject接口来实现表单文件上传到OSS 步骤1:配置Bucket跨域访问客户端进行表单直传到OSS时,会从浏览器向OSS发送带有Origin的请 ...
微信小程序如何上传音视频到百度云Bos cloud BCE
在做了一系列调查之后,目前为止暂未发现有相关的文章,在此简单记录一下解决此问题的步骤,造福来人. 本人的解决方案参考了百度云BOS官方文档,地址如下: https://cloud.baidu.com/ ...
**微信小程序图片上传+后台PHP修改图片名称**
微信小程序图片上传+后台PHP修改图片名称前端代码:比较随意 <view class="weui-uploader"><view class="img ...

小程序上传图片/上传视频

---------------------------------分割线------------------------------

小程序上传图片/上传视频相关推荐

最新文章

热门文章