uni-app H5 上传图片

环境

uni-app
uView2.x - 表单组件 Upload 上传

前端代码

假设分为新增、编辑、预览、三个操作，则代码实现略有不同
1.仅新增时，初始数据为空、图片文件列表也为空，对源码无需做何修改
2.仅编辑时，初始化需要加载图片列表，加载和上传时需注意 fileList2 中图片地址的问题（如果数据库始终保存完整地址，也无需考虑，请视情况而定）
3.仅预览时，upload组件需隐藏上传按钮、设置maxCount长度、添加disabled属性

<template><!-- 新增 --><u-upload:fileList="fileList1" //显示已上传的文件列表@afterRead="afterRead" //选择图片后，上传事件@delete="deletePic" //删除图片 事件name="1" //标识符，可以在回调函数的第二项参数中获取multiple //是否开启图片多选:maxCount="10" //最大选择图片的数量:previewFullImage="true" //是否显示组件自带的图片预览功能，默认为true></u-upload><!-- 编辑 --><u-upload:fileList="fileList2"@afterRead="afterRead"@delete="deletePic"name="2"multiple:maxCount="10":previewFullImage="true"></u-upload><!-- 预览，需隐藏上传按钮，所以对maxCount绑定动态值，有几张图片，值就设为几 --><u-upload:fileList="fileList3"name="3":maxCount="form3.maxCount":previewFullImage="true"disabled //是否启用(显示/隐藏)组件></u-upload>
</template><script>export default {data() {return {//新增form1: {id: 201510231859001,name: 'name1'},//编辑form2: {id: 201510231859002,name: 'name2'},//预览form3: {id: 201510231859003,name: 'name3',maxCount: 0},fileList1: [], //新增fileList2: [], //编辑fileList3: [], //预览}},methods:{// 查询数据initRender() {uni.showLoading({title: "数据加载中",mask: true})this.$axios({url: this.$url + "query.api",method: 'post',params: {parameter1,parameter2}}).then(res => {if(res.data.success === this.$succ){let data = res.data.data[0]// 其它业务代码省略...// isNull是项目中自定义全局判空方法 uni-app 直接使用 if(!data.photoUrl) 即可// photoUrl字段 存储图片地址（多张之间以分号隔开）if (!this.isNull(data.photoUrl)){// 路径let tempPassportUrl = data.photoUrl.split(';')// 仅预览时，设置maxCount的值，则upload组件不会显示上传按钮，编辑或新增时，不对其设置值//data.maxCount = tempPassportUrl.length//this.form3.maxCount = tempPassportUrl.length// 迭代封装url组合成完整的urlfor(var i = 0; i < tempPassportUrl.length; i++){let url = tempPassportUrl[i]// 获取namelet splitArray = url.split('/')let name = splitArray[splitArray.length - 1]// 存储图片路径// 仅新增时，无需从后端查询数据，初始化时不需要往fileList1中存值//this.fileList1 ×// 编辑时，需从后端查询数据，url中存储文件服务器地址+存储地址，saveUrl放存储地址即可，用于保存数据this.fileList2.push({name: name, url: this.$ftpUrl + url, saveUrl: url}) // 预览则不需要进行保存操作，也无需saveUrl属性/*this.fileList3.push({name: name, url: this.$ftpUrl + url})*/}}//this.form1 ×this.form2 = data//this.form3 = datauni.hideLoading()}else{uni.showToast({title: res.data.message || "数据加载失败",icon: "none"})}})},// 删除图片deletePic(event) {this[`fileList${event.name}`].splice(event.index, 1)},// 新增图片async afterRead(event) {// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式let lists = [].concat(event.file)let fileListLen = this[`fileList${event.name}`].lengthlists.map((item) => {this[`fileList${event.name}`].push({...item,status: 'uploading',message: '上传中'})})for (let i = 0; i < lists.length; i++) {//使用uni.uploadFile上传图片，后端接口返回图片保存地址//例：   /fileservice/passport/img/1656502865037.jpgconst result = await this.uploadFilePromise(lists[i].url)let item = this[`fileList${event.name}`][fileListLen]this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {status: 'success',message: '',url: result, //这里要将完整地址 赋值给urlsaveUrl: result //此处与官网略有不同，在当前页需要同时完成预览和编辑功能时，需要用到}))fileListLen++}},uploadFilePromise(url) {return new Promise((resolve, reject) => {let a = uni.uploadFile({url: this.$url + "uploadFiles.api", //仅为示例，记得修改filePath: url,name: 'file',formData: { //传其它参数user: 'test'},success: (res) => {//如果后端接口返回数据是text格式，则需要JSON格式转换//let result = JSON.parse(res.data) setTimeout(() => {//result.data 为图片地址//resolve(result.data)resolve(res.data.data)}, 1000)}});})},}}
</script>

预览PDF / 图片

当“photoUrl”同时保存PDF文件地址或图片地址时
需要预览PDF，要对后端返回的数据进行判断（此处没有预览PDF相关的代码，需要的话可以留言，实现方式有点low哈，可以交流一下）

                     //pdf和图片只能有一种，图片可多张，pdf文件仅可上传一个if (!this.isNull(data.photoUrl)){//判断是jpg还是pdfvar isPDF = false//路径let tempPassportUrl = data.photoUrl.split(';')if(tempPassportUrl[0].split(".")[1] == 'PDF' || tempPassportUrl[0].split(".")[1] == 'pdf'){isPDF = truedata.maxCount = 0} else {data.maxCount = tempPassportUrl.length}//迭代封装url组合成完整的urlfor(var i = 0; i < tempPassportUrl.length; i++){let url = tempPassportUrl[i]//获取namelet splitArray = url.split('/')let name = splitArray[splitArray.length - 1]if(isPDF){this.pdfName = namethis.pdfUrl = this.$ftpUrl+url}else{this.fileList1.push({name: name, url: this.$ftpUrl+url, saveUrl: url})}}}

后端接口部分代码 Java

这里没有贴完整代码哈，公司实现方式不一样，所以不一定用得到，看一下后端参数类型就行了

 /*** 上传文件* Rest 自定义接口返回结果实体*/@PostMapping("/uploadFiles.api")@ApiIgnorepublic Rest uploadFiles(final MultipartFile file){Rest rest = new Rest();try{String path = "/fileservice/passport/img/";String fileUrl = file.getOriginalFilename();//拼接文件名：时间戳+文件后缀名fileUrl = System.currentTimeMillis() + fileUrl.substring(fileUrl.lastIndexOf("."));//FTPUtils 自定义文件上传工具类boolean isOk = FTPUtils.uploadFile(path, fileUrl, file);if(isOk){rest.setData(path + fileUrl);}else{rest.setSuccess(false);rest.setMessage("上传文件失败");rest.setErrCode("0001");}}catch (Exception e){rest.setSuccess(false);rest.setMessage(e.getMessage());return rest;}return rest;}

以上是本文全部内容，感谢查看！
欢迎参考，感谢指正！

uni-app H5 上传图片相关推荐

uni App+H5 实现人脸识别
uni App+H5 实现人脸识别通过h5的视频video管理设备摄像头(不要关),在打开视频摄像时快照截取人脸照片传送到后台通过API接口调用百度人脸识别结果并通过返回数据解析自己业务需求. 1. ...
uni app(H5)中软键盘弹出,固定定位绝对定位元素位置发生错乱
一.问题如下最近用uni app写项目,发现H5软键盘弹起,导致我固定定位的按钮被顶了上去,如图二.解决方法 1.让其在输入框获取焦点时隐藏百度了许多,有让输入框获取焦点时让按钮隐藏的方法,失去 ...
uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...
省钱兄同城跑腿小程序源码uniapp前端模版源码（小程序+APP+H5）
开源省钱兄同城跑腿源码,目前只开源用户端V2版本部分核心模块源码提供学习研究使用uniapp技术,提供学习使用不可商业适配支持公众号+APP+H5+小程序,使用Hbuilder导入即可运行 #功能 ...
uni app 视频播放功能
视频播放功能,需求:编译成纯h5网页,运行在任意容器里,如浏览器.安卓原生和iOS等媒体组件video 首先使用video组件,然后高度需要自己设置 uni.createVideoContext 官 ...
uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
uni app实现WIFI功能(只支持安卓APP)
uni app实现WIFI功能一.前言二.使用 uni-WIFI 三.使用h5+ api 一.前言最近需要在uniapp上实现WiFi功能,将个人的研究结果记录如下(都只支持安卓APP) 使用 ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...

uni-app H5 上传图片

uni-app H5 上传图片

uni-app H5 上传图片

环境

前端代码

预览PDF / 图片

后端接口部分代码 Java

uni-app H5 上传图片相关推荐

最新文章

热门文章