uni-app 拍照或从相册上传图片

后台使用的是Java SSM框架

<template><view><view class="cu-bar bg-white margin-top"><view class="action">图片上传</view><view class="action">{{imgList.length}}/{{imgMaxNum}}</view></view><view class="cu-form-group"><view class="grid col-4 grid-square flex-sub"><view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]"><image :src="imgList[index]" mode="aspectFill"></image><view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index"><text class='cuIcon-close'></text></view></view><view class="solids" @tap="ChooseImage" v-if="imgList.length<4"><text class='cuIcon-cameraadd'></text></view></view></view><view class="cu-form-group upload-btn"><button class="cu-btn block bg-blue margin-tb-sm lg">上传</button></view></view>
</template>

var _this = this;
export default {data() {return {imgList: [],imgMaxNum: 4}},onLoad() {},methods: {ChooseImage() {_this = this;uni.chooseImage({count: 4, //默认9sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有sourceType: ['camera','album'], //从相机、相册选择success: (res) => {var tempFilePaths = res.tempFilePaths;if (_this.imgList.length+tempFilePaths.length > _this.imgMaxNum) {uni.showToast({title: '超过上传图片的最大数量',icon: 'none'})} else {if (_this.imgList.length != 0) {_this.imgList = _this.imgList.concat(res.tempFilePaths);} else {_this.imgList = res.tempFilePaths;}for (var i = 0; i < tempFilePaths.length; i++) {uni.uploadFile({url: baseUrl + "uploadImgAPP.do",filePath: tempFilePaths[i],name: "file", // 一定要与后台@RequestParam("file") MultipartFile变量名一致success(res) {console.log(res);}});}}}});},ViewImage(e) {uni.previewImage({urls: this.imgList,current: e.currentTarget.dataset.url});},DelImg(e) {this.imgList.splice(e.currentTarget.dataset.index, 1)},}
}

@RequestMapping("uploadImgAPP")
public String uploadImgAPP(@RequestParam("file") MultipartFile file,HttpServletRequest request){String fileName = "";if (file != null && !file.isEmpty()) {try {String targetSrc = request.getServletContext().getRealPath("/")+"files";fileName = file.getOriginalFilename();fileName = fileName.substring(fileName.lastIndexOf("."));fileName = UUID.randomUUID().toString() + fileName;File targetDir = new File(targetSrc);if (!targetDir.exists()) {targetDir.mkdirs();}File targetFile = new File(targetSrc, fileName);if (targetFile.exists()) {targetFile.delete();}file.transferTo(targetFile);} catch (Exception e) {e.printStackTrace();}}return fileName;
}

uni-app 拍照或从相册上传图片相关推荐

Android 使用腾讯X5 Webview浏览器拍照或从相册上传图片
最近在项目开发中,需要使用WebView上传文件.默认情况下情况下,使用Android的WebView是不能够支持上传文件的. 经过查找资料,得知需要重新WebChromeClient,根据选择到的文 ...
WebView中拍照或从相册上传图片
转载自WebView中拍照或从相册上传图片注,安卓4.4系统的浏览器内核会出问题,即使使用本篇文章所讲的方法也无法吊起这个方法,属于谷歌系统的问题Stack Overflow 问题,但是4.4以上的 ...
【Android开发技巧】关于Webview拍照或从相册上传图片处理总结
新博客前言: 各公司为了处理更多的业务流程, 一般都会加入H5与原生交互处理,方便快速开发,迭代项目.但,在Android中,H5与原生的交互处理的就没有iOS那么好.其中适配也是一个问题,Andr ...
[Android] WebView中拍照或从相册上传图片
WebView 上传图片, 想必很多人都碰到过这样的场景. 而且 WebView 在4.4前后的区别非常大, 比如对URL跳转的格式, 对JS的注入声明等等, 4.4以后的WebView 已经是chr ...
Flutter 项目实战拍照 | 打开相册 | 上传图片八
/ Ios . Android 应用权限开启流程 / IOS 应用 (询问权限.开启权限) Android 应用(询问权限.开启权限) / 自定义选择相机和相册的对话框 / 创建一个存放对话框标题. ...
Android开发之App拍照系统相册展示
需求:客户提出一个需求,App拍照的照片需要直接在系统相册中可以查看得到. 解决方案: 第一次尝试:刚开始想到的是网上这三种方式:http://blog.csdn.net/qq_34157407/ar ...
APP开发-使用Vue3+vant+html5+ 实现相机拍照，选取相册图片，裁剪图片以及提取图片中的文字等功能（二）
没用使用过Html5+请参考另一篇博客:如何在Vue项目里面使用Html5+ 一.实现图片的裁剪 1.1 在上个步骤当中,我们已经实现了拍照和相册里面选取图片,在最后的js方法当中,我们会将拍照或者从 ...
ionic拍照，从相册选择功能
在介绍插件的使用之前,我们有必要先大致了解下插件的原理一.插件工作原理分析一个插件是如何正确地在IONIC框架下运行的呢? 前台的HTML/js代码又是如何与后面具体平台做数据交互的呢? 这个就需 ...
takephoto 框架_GitHub - Smecking/TakePhoto: 一款用于在Android设备上获取照片（拍照或从相册、文件中选择）、裁剪图片、压缩图片的开源工具库...
TakePhoto是一款用于在Android设备上获取照片(拍照或从相册.文件中选择).裁剪图片.压缩图片的开源工具库,目前最新版本4.0.2. 3.0以下版本及API说明,详见TakePhoto2. ...

uni-app 拍照或从相册上传图片

uni-app 拍照或从相册上传图片相关推荐

最新文章

热门文章