跨平台应用开发进阶(四) :uni-app 实现上传图片
文章目录
- 一、前言
- 二、项目实战
- 三、知识点总结
- 3.1 实现原理
- 3.2 注意事项
- 四、学习一隅
一、前言
应用uni-app
开发跨平台App项目时,上传图片、文档等资源功能需求十分常见:点击相框按钮可选择图片上传,点击每一个图片可以进行预览,点击每个图片删除图标可删除对应图片。基本实现功能点如下:
- 本地相册选择图片或使用相机拍照上传图片;
- 可以预览选择上传的图片;
- 删除选错或不选的图片;
二、项目实战
经过研读uni-app门户,官网推荐应用uni.chooseImage(OBJECT)
接口从本地相册选择图片或使用相机拍照。
对于门户提到的
选择照片大多为了上传,
uni ui
封装了更完善的uni-file-picker
组件,文件选择、上传到uniCloud
的免费存储和cdn中,一站式集成。强烈推荐使用。
⚠️本人并不认可,经过实践可知,该接口只能实现客户端将图片资源上传到uniCloud
后台服务器中,并不支持本地服务器,故并不满足功能需求,需谨慎使用。
项目实现页面大致逻辑如下,完整页面实现逻辑可移步《Uni-app 实现图片上传、删除、预览、压缩》下载。
视图渲染
<template><view class="center"><!-- 上传图片 --><view class="uploadClass"><view class="imgClass" v-for="(item, i) in imgList" :key='i' @click="viewImage(i, imgList)"><image style="width: 100%;height: 100%;" :src="item"></image><view @click.stop="delImg(i, imgList, imgsID)" style="display: inline;"><uni-icons type="closeempty" class="closeClass" size="20"></uni-icons></view></view><view v-show='curTotal < 3' class="cameraClass" @tap="upload"><image style="width: 48rpx; height: 38rpx;" src="@/static/appCenter/zhaoxiangji@2x.png"></image></view><!-- 图片数量提示 --><view class="totalClass">{{curTotal}}/3</view></view>
</template>
JS逻辑层-图片上传
// 图片选择上传
upload() {var _self = this;// 图片选择,只支持一次选择一张图片uni.chooseImage({count: 1,sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有sourceType: ['album', 'camera'], //从相册、相机选择success: function (res) {console.log('res:', res)_self.curTotal++;_self.imgList.push(res.tempFilePaths[0]);const tempFilePaths = res.tempFilePaths[0];// 图片上传const uploadTask = uni.uploadFile({url : 'http://22.189.25.91:9988/admin/sys-file/upload', // post请求地址filePath: tempFilePaths,name: 'file', // 待确认header: {'Content-Type': 'multipart/form-data','Authorization': getApp().globalData.token || 'Basic YXBwOmFwcA=='},success: function (uploadFileRes) {console.log('Success:', uploadFileRes);_self.imgsID.push(JSON.parse(uploadFileRes.data).data.fileId);console.log('_self.imgsID:', _self.imgsID)},fail: function (uploadFileFail) {console.log('Error:', uploadFileFail.data);},complete: ()=> {console.log('Complete:');}});},error : function(e){console.log(e);}});
}
JS逻辑层-图片预览
/*** 图片预览* @param {Object} i 选择的图片索引* @param {Object} imgList 自行封装的图片数组*/
viewImage(i, imgList) {let imgurl = []imgList.forEach(item => imgurl.push(item))uni.previewImage({urls: imgurl,current: imgList[i]});
}
JS逻辑层-图片删除
/** 图片删除* @param {Object} i 删除图片的索引* @param {Object} imgList 自行封装的图片数组*/
delImg(i, imgList, imgsID) {uni.showModal({title: '提示',content: '确定要删除照片吗?',cancelText: '取消',confirmText: '确定',success: res => {if(res.confirm) {imgList.splice(i, 1);imgsID.splice(i, 1);this.curTotal--;}}})
}
}
JS逻辑层-图片压缩
// src: 压缩转换原始图片的路径
// _this: 当前的this,如果不想传递this可将该函数改为箭头函数
// callback: 回调函数,详情chooseImage方法
function compressImage(src, _this, callback) {var dstname = "_doc/IMG-" + (new Date()).valueOf() + ".jpg"; //设置压缩后图片的路径 var width, height, quality;width = "80%";height = "80%";quality = 80;// 具体情况可查看HTML5+文档 ===> http://www.html5plus.org/doc/zh_cn/zip.html#plus.zip.compressImageplus.zip.compressImage({src: src,dst: dstname,overwrite: true,quality: quality,width: width,height: height},function(event) {callback(event.target, dstname, _this);},function(error) {return src;});
}
注意⚠️:在图片上传之前进行图片压缩,由于图片压缩时间过长,应采用
await
上传图片之前先压缩,否则上传会比压缩先执行。
应用实现效果如下:
拍照或从相册选择图片/上传一张图片
上传3张图片/删除图片
三、知识点总结
3.1 实现原理
客户端通过uni.chooseImage()
方法选择本地相册图片或者拍照,获取到一个本地资源的临时文件路径后,然后以 POST
请求方式通过uni.uploadFile()
方法将本地资源上传到开发者服务器,POST
请求中 content-type
为 multipart/form-data
。
3.2 注意事项
⚠️图片选择应用
uni.chooseImage()
实现,请谨慎使用uni ui
封装的所谓更完善的uni-file-picker
组件,其将资源文件选择、上传到uniCloud
的免费存储和cdn
中,一站式集成,个人无法修改。强烈推荐不使用!⚠️图片上传应用
uni.uploadFile()
实现,上传成功后回调函数返回的uploadFileRes.data
是个String
类型,转对象的时候需要应用JSON.parse()
解析。JSON.parse(uploadFileRes.data).data.fileId)
{"data": "{\"code\":0,\"msg\":null,\"data\":{\"bucketName\":\"cicc\",\"fileName\":\"5aaa39d669224ffb869b60d245b0751a.jpg\",\"original\":\"1644999553865_mmexport1644913914292.jpg\",\"url\":\"/admin/sys-file/cicc/5aaa39d669224ffb869b60d245b0751a.jpg\",\"fileId\":\"172\"}}","statusCode": 200,"errMsg": "uploadFile:ok" }
uni.uploadFile()
OBJECT 参数说明部分中name
属性为待上传文件对应的key
, 开发者在服务器端通过这个key
可以获取到文件二进制内容,前后端对于该key应保持一致,否则会导致服务无法请求。
图片预览应用
uni.previewImage()
实现,没遇到坑,大家可根据需求按照门户参数使用。
四、学习一隅
- uni.chooseImage()
- uni.uploadFile()
- uni.previewImage()
- 《Cross-platform APP专栏》
跨平台应用开发进阶(四) :uni-app 实现上传图片相关推荐
- 跨平台应用开发进阶(四十七)APP字体库文件处理方案
文章目录 一.前言 二.字体格式科普 2.1 TTF 2.2 OTF 2.3 WOFF & WOFF2 2.4 SVG 三.字体库压缩 3.1 取子集 3.2 压缩 一.前言 有时候需要让页面 ...
- 跨平台应用开发进阶(四十六)webview方式嵌套H5应用加载慢解决方案
文章目录 一.前言 二.优化建议 三.实施方案 3.1 优化项目结构,减小项目组包体积 3.2 去除项目冗余字体文件 3.2.1 字体筛选 3.2.2 字体压缩 3.3 gzip压缩 3.4 ETag ...
- 跨平台应用开发进阶(四十三)一文走近网络层抓包工具:WhireShark
文章目录 一.前言 二.条件过滤 三.字段含义 四.TCP连接 4.1 三次握手示例 五.色彩规则 六.分析方法 6.1 Packet size limited during capture 6.2 ...
- 跨平台应用开发进阶(四十一)使用Xcode打包 iOS 应用 archive 时四种证书的区别详解
文章目录 一.archive 四种模式 二.相同点 三.安装方式区别 四.iOS开发者账号(企业版)申请攻略 4.1 苹果开发者账号类型 4.2 企业版开发者账号的优势是什么? 4.3 企业版开发者账 ...
- 跨平台应用开发进阶(四十二)vue与nvue页面设计方案探究
文章目录 一.前言 二.选择方案 2.1 CSS注意事项 三.快速上手 3.1 新建 nvue 页面 3.2 开发 nvue 页面 3.3 调试 nvue 页面 四.拓展阅读 一.前言 在应用uni- ...
- 跨平台应用开发进阶(四十五)uni-app集成企微客服实战
文章目录 一.前言 二.功能实现 2.1 环境准备 2.2 代码层面 2.3 拓展工具 三.拓展阅读 一.前言 应用运营过程中,考虑接入企业微信客服功能,大致看了下官方接入文档,并不困难,引入代码量也 ...
- 跨平台应用开发进阶(三十八)uni-app前端监控方案:基调听云APP探究
文章目录 一.前言 二.产品介绍 2.1 工作原理 2.1.1 Android平台工作原理 2.1.2 iOS平台工作原理 三.项目集成 3.1 Android集成 3.2 iOS集成 四.答疑解惑 ...
- 跨平台应用开发进阶(六十一):uni-app 跨平台技术开发框架可行性调研
文章目录 一.流程类 二.研发类(uni-app框架) 三.心得分享(研发踩坑&uni-app踩坑) 四.拓展阅读 一.流程类 IOS和安卓企业开发者账户申请流程(申请渠道.需要提供的相关证明 ...
- 跨平台应用开发进阶(三十):uni-app 实现集成火山视频直播服务
文章目录 一.前言 二.技术实现 2.1 web-view组件在app中的窗体关系和plus.webview操作方式 三.双向通信 3.1 uni-app与内嵌网页通信 3.2 内嵌网页向uni-ap ...
- 跨平台应用开发进阶(八) :uni-app 实现Android原生APP-云打包集成极光推送(JG-JPUSH)详细教程
文章目录 一.前言 二.资源 三.集成 3.1 SDK 引入 3.2 代码集成 3.3 遇到的问题及解决方案 3.3.1 包大小限制 3.3.2 [JS Framework] 当前运行的基座不包含原生 ...
最新文章
- python爬虫入门教程-Python 爬虫介绍
- BC:带你温习并解读《中国区块链技术和应用发展白皮书》—区块链标准体系框架
- excel转latex,markdown,html表格的神仙网站!科研必备!
- mysql union order_MySQL中union和order by同时使用的实现方法
- ssh连接+执行系统命令
- 如何在CISCO PIX上实现×××步骤?
- final、finally和finalize;throw和throws;collection和collections;==和equals;Statement和PrepareStatement...
- 访问者(Visitor Pattern )模式
- ASP.NET MVC下使用AngularJs语言(一):Hello your name
- 再谈Activator.CreateInstance(Type type)方法创建对象和Expression Tree创建对象性能的比较(更新版)...
- mysql索引红黑联盟_MySQL的索引
- 华为流程解析流程的端到端
- 【RS-422与RS-485】RS-422与RS-485串行接口标准
- bam文件测序深度统计-bamdst
- Excel图表制作(二):动态图表制作
- 【java初学者】理解,从面向过程 到 面向对象,面向接口,面向切面
- CSS3 SVG 画一个三角形
- php聊天室发送表情,聊天室之表情发送
- horovod 安装及使用
- 计算机毕业设计Java联想搜索爬虫设计
热门文章
- mini6410 LED驱动程序及LED测试程序的设计
- python ffmpeg剪辑视频_FFmpeg精准时间切割视频文件
- linux设置默认mbr,将默认 EC2 CentOS MBR 转换为 GPT 以绕过 2TiB 限制
- exchange虚拟服务器,exchange服务器之为Exchange服务重建IIS虚拟目录
- 用过企业微信APP 后,微信接收不到消息,解决方案
- 史话下:量子物理学的前世今生
- 计算机组成原理:MIPS
- 数电(二)—分析/画逻辑电路图
- 40个科研学术网站,收藏必备,予取予求!
- python selenium+firefox对网页截长图