uniapp图片上传，uniapp视频上传，uniapp附件上传，uniapp上传文件、uniapp文件上传组件

uniapp文件上传组件，支持图片、视频上传

html部分：

<template><view class="annex-wrap"><view class="annex-box"><view class="lab">上传附件</view><view class="file-list"><viewclass="file-list-item"v-for="(item, index) in dataList":key="index"><view class="file-list-item-inner"><!--图片--><image:src="item.tempFilePath"class="upload-temp-img"v-if="item.fileType === '1'"mode="aspectFill"@click="toPreview(item)"></image><!--视频--><view v-if="item.fileType === '2'" class="file-area"><view @click="toPreview(item)"><u-iconname="play-circle-fill"color="#1890FF"size="80"></u-icon><view class="name">{{ item.fileName }}</view></view></view><view @click="removeFile(index)" class="close-btn"><u-icon name="close" size="20"></u-icon></view></view></view><view class="file-list-item" @click="toShowChooseSheet()"><view class="file-list-item-inner upload-btn"><view><u-icon name="plus" color="#929AA5" size="36"></u-icon><view>{{ dataList.length }}/{{ maxFilesNum }}</view></view></view></view><u-emptytext="暂无数据"mode="data"v-if="dataList.length === 0"></u-empty></view></view><u-action-sheet:list="uploadTypeList"v-model="showUploadTypeSheet":tips="uploadTypeTips":border-radius="20"@click="chooseUploadType"></u-action-sheet><u-popupv-model="showPreview"border-radius="14"mode="center"width="95%"closeable@close="closePreview"><view class="preview-content"><image:src="previewItem.url"mode="aspectFit"style="width: 100%; height: 100%"v-if="previewItem.fileType === '1'"></image><video:src="previewItem.url"id="preview-video":autoplay="false"controls:show-progress="true":show-center-play-btn="true"v-if="previewItem.fileType === '2'"></video></view></u-popup></view>
</template>

css：<style lang="scss" scoped>
.annex-wrap {background: #f5f7fa;.err-color {color: #f00;}.border-dashed {margin: 24rpx 0;border: 1px dashed #eff0f2;}.icon-arrow {margin-left: 12rpx;}.annex-box {background: #ffffff;border-radius: 10px;margin-top: 24rpx;color: #475569;margin-top: 24rpx;padding: 24rpx 34rpx;position: relative;overflow: hidden;position: relative;line-height: 1.6;.lab {font-size: 28rpx;color: #475569;padding: 10rpx;}&.select-box {padding: 0 34rpx;.u-form-item {color: #475569;padding: 16rpx 0;}}.mt-10 {margin-top: 10rpx;}.top {position: relative;.left {margin-right: 150rpx;}.title {font-size: 34rpx;color: #303133;font-weight: 550;}.desc {color: #929aa5;font-size: 24rpx;}.user-tag {margin-left: 24rpx;background-color: #f4f9ff;color: #1890ff;font-size: 22rpx;display: inline-block;border-radius: 6rpx;padding: 4rpx 20rpx;.text {margin-left: 10rpx;}}.right-icon {position: absolute;right: 0rpx;top: -20rpx;.icon {width: 170rpx;height: 170rpx;}}.result-items {overflow: hidden;.result-item {width: 33%;float: left;padding: 12rpx 0;text-align: center;position: relative;.red {color: #ff7676;}}.result-item:after {height: 60rpx;width: 1px;border-left: 1px solid #eff0f2;content: "";display: inline-block;position: absolute;right: 0;top: 50%;transform: translateY(-50%);}.result-item:nth-child(3n):after {display: none;}.name {color: #929aa5;font-size: 24rpx;}.num {color: #303133;font-size: 30rpx;}}}}.file-list-item {width: 31%;padding: 15.5% 0 15.5% 0;margin-right: 3.5%;position: relative;display: inline-block;overflow: hidden;&-inner {position: absolute;left: 0;right: 0;top: 0;bottom: 0;width: 100%;height: 100%;display: flex;.upload-temp-img {max-width: 100%;max-height: 100%;border-radius: 10rpx;}}.upload-btn {border: 2px dashed #e2e8f0;border-radius: 10rpx;background: #fff;text-align: center;font-size: 26rpx;color: #929aa5;cursor: pointer;}&:nth-child(3n) {margin-right: 0;}.file-area {position: relative;display: flex;align-items: center;justify-content: center;background: rgba(77, 151, 255, 0.05);text-align: center;width: 100%;border-radius: 10rpx;.name {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 160rpx;}.icon-file {width: 60rpx;height: 74rpx;}video {width: 100%;height: 100%;}}.close-btn {position: absolute;right: 0;top: 0;background: rgba(71, 85, 105, 0.3);border-radius: 0px 10rpx 0px 10rpx;display: inline-block;width: 40rpx;height: 40rpx;cursor: pointer;text-align: center;color: #fff;z-index: 9;}}
}.preview-content {width: 100%;height: 90vh;padding-top: 80rpx;padding-bottom: 20rpx;text-align: center;display: flex;align-items: center;video {width: 100%;height: 100%;}
}
</style>

js：

  data() {return {showPreview: false,previewItem: {url: "",fileType: "",},dataList: [],uploadTypeList: [{text: "图片",},{text: "视频",},],uploadTypeTips: {text: "请选择上传文件类型",color: "#909399",fontSize: 32,},showUploadTypeSheet: false,maxFilesNum: 20, //最大上传数};},methods: {// 获取附件列表-查看或编辑时候用getFileList() {let data = {id: id,};getFileList(data).then((res) => {if (res.code === 200) {this.dataList = res.result;this.dataList.forEach((item) => {item,(item.tempFilePath = `域名/file/downloadFile?filePath=${item.filePath}`);//tempFilePath：文件的临时地址，或者拼一个获取文件临时地址的接口，临时文件地址才可以预览});}});},// 打开预览toPreview(item) {if (item.fileType === "1") {this.showPreview = true;// 添加延时加载 避免popup不显示setTimeout(() => {this.previewItem = {url: item.tempFilePath,fileType: item.fileType,};}, 500);} else if (item.fileType === "2") {this.showPreview = true;this.downloadVideo(item.tempFilePath);}},// 关闭预览closePreview() {this.previewItem = {url: "",fileType: "",};},// 移除文件removeFile(index) {let that = this;uni.showModal({title: "提示",content: "确定删除此项吗？",success: function (res) {if (res.confirm) {that.dataList.splice(index, 1);}},});},// 上传图片chooseImage() {let that = this;uni.chooseImage({count: this.maxFilesNum - this.dataList.length, //默认100sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有sourceType: ["album", "camera"],success: (res) => {const tempFilePaths = res.tempFilePaths;let imgArr = [];//   图片批量上传for (let i = 0; i < tempFilePaths.length; i++) {let obj = new Object();obj.name = `files` + i;obj.uri = tempFilePaths[i];imgArr.push(obj);obj = null;}uni.showLoading();uni.uploadFile({//url：上传文件接口，返回文件名、文件类型、文件大小、文件地址等url: `域名/file/uploadFile`,files: imgArr,success: (uploadRes) => {let data = JSON.parse(uploadRes.data);if (data.code === 200) {(data.result || []).forEach((item, index) => {that.dataList.push({fileType: "1",//1图片，2视频fileName: item.fileName,filePath: item.filePath,fileSize: item.fileSize,fileSuffix: item.fileSuffix,tempFilePath: tempFilePaths[index],});});} else {uni.showToast({icon: "none",title: "上传失败",});}},complete: () => {uni.hideLoading();},});},});},// 上传视频chooseVideo() {let that = this;uni.chooseVideo({sourceType: ["album", "camera"],success: (res) => {const tempFilePath = res.tempFilePath;uni.showLoading();uni.uploadFile({//url：上传文件接口，返回文件名、文件类型、文件大小、文件地址等url: `域名/file/uploadFile`,filePath: tempFilePath,name: "file",success: (uploadRes) => {let data = JSON.parse(uploadRes.data);if (data.code === 200) {that.dataList.push({fileType: "2",fileName: data.result.fileName,filePath: data.result.filePath,fileSize: data.result.fileSize,fileSuffix: data.result.fileSuffix,tempFilePath: `域名/file/downloadFile?filePath=${data.result.filePath}`,//tempFilePath：文件的临时地址，或者拼一个获取文件临时地址的接口});} else {uni.showToast({icon: "none",title: "上传失败",});}},complete: () => {uni.hideLoading();},});},});},//查看-下载视频downloadVideo(url) {let that = this;uni.showLoading({title: "加载中",});uni.downloadFile({url: url, //仅为示例，并非真实的资源success: (res) => {if (res.statusCode === 200) {this.previewItem = {url: res.tempFilePath,fileType: "2",//1图片，2视频};// 自动播放setTimeout(() => {let videoContxt = uni.createVideoContext("preview-video", that);videoContxt.play();}, 500);}uni.hideLoading();},error: (e) => {uni.hideLoading();},});},// 选择上传文件类型chooseUploadType(index) {if (index === 0) {// 图片this.chooseImage();} else if (index === 1) {// 视频this.chooseVideo();}},//  打开文件上传选择类型弹窗toShowChooseSheet() {if (this.dataList.length >= this.maxFilesNum) {uni.showToast({title: "最多只能上传20个附件",icon: "none",});return false;} else {this.showUploadTypeSheet = true;}},},

注意：图片或者视频预览的时候，需要一个文件的临时地址

uniapp图片上传，uniapp视频上传，uniapp附件上传，uniapp上传文件、uniapp文件上传组件相关推荐

微信小程序上传大视频到七牛云-附七牛优惠码
最近接到一个微信小程序的项目,客户要求将小程序视频上传到七牛云,并且由我们进行维护,大概看了下客户的需求,视频文件应该不少,每个月的费用自然也不少,小编在充值的时候突然看到有个优惠码选项,便在网上一搜 ...
用python计算ph,用python下载PH上的学习视频
努力学习,天天向上闲来无事,用python写个脚本下载PH上的学习视频环境:python3 用法:python ph_downloader.py viewkey viewkey是PH上的一串字符 ...
Linux使用双向链表实现图片、音乐、视频的切换和删除功能
Linux使用双向链表实现图片.音乐.视频的切换和删除功能 Linux检索目录下的后缀文件(.bmp .avi .mp3),并将文件名存入链表中一.双向链表的实现 1.创建双向链表 2.链表节点添加 ...
uni-app图片、视频上传
uni-app图片.视频上传 1.上传按钮 // template <view class="add-circle" @click="handlePostType& ...
uniapp 图片上传与展示
项目场景: uniapp 图片上传阿里 OSS 对象存储需求描述: H5移动端开发中需要用户上传图片头像.身份证件等需求时.需要将图片上传至阿里oss中存储,并且下载到当前页面进行展示. 解决方 ...
uni-app 图片上传七牛云
前台uni-app+colorUi 后台jeecgboot 思路用colorui能实现效果,但是路径还是指向本地用七牛云,先上传到七牛云,返回路径并且指向它后台去获取七牛token并且返回(最后 ...
uniapp图片上传与压缩，兼容小程序与H5
图片上传借助了Uview2.0的组件 <u-upload :fileList="imgs" :name="" @afterRead="after ...
vue2 + tinymce 包含自定义图片上传及视频、音频上传
安装安装时需要注意一个问题,两个包如果不适用会出现报错情况且无法使用,我这边使用的是当前这两个版本 npm install @tinymce/tinymce-vue@3.2.8 -S npm ins ...
多文件断点续传，上传视频自动转MP4和截图，图片格式转换
功能:自己写的一个组件,根据调用传过来的的fileType判断是上传视频还是图片还是音频.可以选择多文件上传,同时也可以暂停,继续,取消,断网重连续传.如果上传的是视频,会自动转为mp4,自动截取一帧 ...
解决uniapp小程序打包体积超过2M，提示包体积超过2M，“main packagexxx”,不给上传和预览的解决办法，绝对有效
解决办法,原文地址: 解决uniapp小程序打包体积超过2M,提示包体积超过2M,"main packagexxx",不给上传和预览的解决办法,绝对有效!在微信小程序开发中,为了解 ...

uniapp图片上传，uniapp视频上传，uniapp附件上传，uniapp上传文件、uniapp文件上传组件

uniapp图片上传，uniapp视频上传，uniapp附件上传，uniapp上传文件、uniapp文件上传组件相关推荐

最新文章

热门文章