跨平台应用开发进阶(四) ：uni-app 实现上传图片

转x33g5p2x  于2022-02-20 转载在 uni-app  
字(4.5k)|赞(0)|评价(0)|浏览(945)

一、前言

应用uni-app开发跨平台App项目时，上传图片、文档等资源功能需求十分常见：点击相框按钮可选择图片上传，点击每一个图片可以进行预览，点击每个图片删除图标可删除对应图片。基本实现功能点如下：

  • 本地相册选择图片或使用相机拍照上传图片；
  • 可以预览选择上传的图片；
  • 删除选错或不选的图片；

二、项目实战

经过研读uni-app门户，官网推荐应用uni.chooseImage(OBJECT)接口从本地相册选择图片或使用相机拍照。

对于门户提到的
选择照片大多为了上传，uni ui封装了更完善的uni-file-picker组件，文件选择、上传到uniCloud的免费存储和cdn中，一站式集成。强烈推荐使用。

⚠️本人并不认可，经过实践可知，该接口只能实现客户端将图片资源上传到uniCloud后台服务器中，并不支持本地服务器，故并不满足功能需求，需谨慎使用。

项目实现页面大致逻辑如下，完整页面实现逻辑可移步《Uni-app 实现图片上传、删除、预览、压缩》下载。

视图渲染

  1. <template>
  2. 	<view class="center">
  3. 		<!-- 上传图片 -->
  4. 		<view class="uploadClass">
  5. 			<view class="imgClass" v-for="(item, i) in imgList" :key='i' @click="viewImage(i, imgList)">
  6. 				<image style="width: 100%;height: 100%;" :src="item"></image>
  7. 				<view @click.stop="delImg(i, imgList, imgsID)" style="display: inline;">
  8. 					<uni-icons type="closeempty" class="closeClass" size="20"></uni-icons>
  9. 				</view>
  10. 			</view>
  11. 			<view v-show='curTotal < 3' class="cameraClass" @tap="upload">
  12. 				<image style="width: 48rpx; height: 38rpx;" src="@/static/appCenter/zhaoxiangji@2x.png"></image>
  13. 			</view>
  14. 			<!-- 图片数量提示 -->
  15. 			<view class="totalClass">{{curTotal}}/3</view>
  16. 		</view>
  17. </template>

JS逻辑层-图片上传

  1. // 图片选择上传
  2. upload() {
  3. 	var _self = this;
  4. 	// 图片选择，只支持一次选择一张图片
  5. 	uni.chooseImage({
  6. 		count: 1,
  7. 		sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
  8. 		sourceType: ['album', 'camera'], //从相册、相机选择
  9. 		success: function (res) {
  10. 			console.log('res:', res)
  11. 			_self.curTotal++;
  12. 			_self.imgList.push(res.tempFilePaths[0]);
  13. 			const tempFilePaths = res.tempFilePaths[0];
  14. 			// 图片上传
  15. 			const uploadTask = uni.uploadFile({
  16. 				url : 'http://22.189.25.91:9988/admin/sys-file/upload', // post请求地址
  17. 			    filePath: tempFilePaths,
  18. 			    name: 'file',  // 待确认
  19. 			    header: {
  20. 					'Content-Type': 'multipart/form-data',
  21. 					'Authorization': getApp().globalData.token || 'Basic YXBwOmFwcA=='
  22. 				},
  23. 				success: function (uploadFileRes) {
  24. 					console.log('Success:', uploadFileRes);
  25. 					_self.imgsID.push(JSON.parse(uploadFileRes.data).data.fileId);
  26. 					console.log('_self.imgsID:', _self.imgsID)
  27. 				},
  28. 				fail: function (uploadFileFail) {
  29. 					console.log('Error:', uploadFileFail.data);
  30. 				},
  31. 				complete: ()=> {
  32. 					console.log('Complete:');
  33. 				}
  34. 			});
  35. 		},
  36. 		error : function(e){
  37. 			console.log(e);
  38. 		}
  39.    });
  40. }

JS逻辑层-图片预览

  1. /**
  2.  * 图片预览
  3.  * @param {Object} i 选择的图片索引
  4.  * @param {Object} imgList 自行封装的图片数组
  5.  */
  6. viewImage(i, imgList) {
  7. 	let imgurl = []
  8. 	imgList.forEach(item => imgurl.push(item))
  9. 	uni.previewImage({
  10. 		urls: imgurl,
  11. 		current: imgList[i]
  12. 	});
  13. }

JS逻辑层-图片删除

  1. /** 图片删除
  2.  * @param {Object} i 删除图片的索引
  3.  * @param {Object} imgList 自行封装的图片数组
  4.  */
  5. delImg(i, imgList, imgsID) {
  6. 	uni.showModal({
  7. 		title: '提示',
  8. 		content: '确定要删除照片吗？',
  9. 		cancelText: '取消',
  10. 		confirmText: '确定',
  11. 		success: res => {
  12. 			if(res.confirm) {
  13. 				imgList.splice(i, 1);
  14. 				imgsID.splice(i, 1);
  15. 				this.curTotal--;
  16. 			}
  17. 		}
  18. 	})
  19. }
  20. }

JS逻辑层-图片压缩

  1. // src: 压缩转换原始图片的路径
  2. // _this: 当前的this，如果不想传递this可将该函数改为箭头函数
  3. // callback: 回调函数，详情chooseImage方法
  4. function compressImage(src, _this, callback) {
  5. 	var dstname = "_doc/IMG-" + (new Date()).valueOf() + ".jpg"; //设置压缩后图片的路径 
  6. 	var width, height, quality;
  7. 	width = "80%";
  8. 	height = "80%";
  9. 	quality = 80;
  10. 	// 具体情况可查看HTML5+文档 ===> http://www.html5plus.org/doc/zh_cn/zip.html#plus.zip.compressImage
  11. 	plus.zip.compressImage({
  12. 			src: src,
  13. 			dst: dstname,
  14. 			overwrite: true,
  15. 			quality: quality,
  16. 			width: width,
  17. 			height: height
  18. 		},
  19. 		function(event) {
  20. 			callback(event.target, dstname, _this);
  21. 		},
  22. 		function(error) {
  23. 			return src;
  24. 		});
  25. }

注意⚠️：在图片上传之前进行图片压缩，由于图片压缩时间过长，应采用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()解析。
  1. JSON.parse(uploadFileRes.data).data.fileId)
  1. {
  2. 	"data": "{\"code\":0,\"msg\":null,\"data\":{\"bucketName\":\"cicc\",\"fileName\":\"5aaa39d669224ffb869b60d245b0751a.jpg\",\"original\":\"1644999553865_mmexport1644913914292.jpg\",\"url\":\"/admin/sys-file/cicc/5aaa39d669224ffb869b60d245b0751a.jpg\",\"fileId\":\"172\"}}",
  3. 	"statusCode": 200,
  4. 	"errMsg": "uploadFile:ok"
  5. }
  • uni.uploadFile() OBJECT 参数说明部分中name属性为待上传文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容，前后端对于该key应保持一致，否则会导致服务无法请求。

  • 图片预览应用uni.previewImage()实现，没遇到坑，大家可根据需求按照门户参数使用。

四、学习一隅

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://shq5785.blog.csdn.net/article/details/122947929

内容来源于网络，如有侵权，请联系作者删除！

vue.jsJavaScript前端

相关文章

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com