uniapp实现图片上传

我的需求是在表单中，点击添加图片，只能选一张本地图片或拍照一张（数量的设置会在下面提到）。(项目写的很急，效果应该是没什么问题都是测过的，但是代码写不够优雅，我自己都能看出来有很多地方写的太繁琐，之后有空在慢慢改吧)

使用uni.chooseImage()选择图片并在成功的回调中给this.imgBg赋值(this.imgBg是image需要的src)，使用plus.zip.compressImage()进行图片压缩给that.imgBgArr赋值(that.imgBgArr是上传给服务器的参数)，在成功的回调中使用uni.uploadFile(OBJECT)将本地资源上传到服务器。

后端会解析拿到的图片资源并返回一个临时路径和绝对路径，在成功的回调中给this.imgBgUrl和imgBgArrUrl赋值，最后在提交表单时，将临时路径和绝对路径加到表单接口参数中一起调用接口上传。最后会加一些其他功能函数，比如图片删除（直接给图片赋空字符串），图片预览（调用uni.previewImage(OBJECT)方法）。

PS：关于最后一步，为什么非要先把文件资源上传给服务器，后端再返回一个临时路径和绝对路径，最后再把这两个路径原封不动的传给后端。我最开始也不是很理解为什么明明这两个路径是后端给我的，难道后端自己在往DB里存的时候就不能获取吗。之后和后端的哥们讨论了一下，他的解释是：完全可以做到，但是如果把接受解析上传的图片资源，生成路径，再把路径存到DB中，最后到前端接受到成功的信息，这一套下来用户需要等待大量（可能吧）的时间，所以为了提升用户体验，尽量不要把所有的处理都放在这一次事件里做。

template部分：因为只有一张图片，所以直接用的字符串，如果需要多张，可以用数组做v-for

<!-- 背景图片 -->
<view class="bg-default" v-if="imgBg === ''" @click="chooseImg()"><view class="" style="width: 70rpx; height: 70rpx;"><image class="my_img" :src="avatarUrl"></image></view><view class="text-default">添加背景图片</view>
</view><view class="add_img_view" v-else><view class="add_img_item" @click="bindImg()"><image :src="imgBg"></image><view class="add_close" @click.stop="deleteImg()"><uni-icons type="clear" size="15" color="#4977F9"></uni-icons></view></view>
</view>

data部分:

data() {return {// 上传默认图片avatarUrl: '../../static/myCheck/default.png',// 背景图展示imgBg: '',// 背景图预览imgBgArray: [],// 背景图路径imgBgArr: '',// 上传的背景临时路径imgBgUrl: '',// 上传的背景图绝对路径imgBgArrUrl: '',}
},

methods部分：

// 选择背景图片chooseImg() {const isIosTrue = uni.getStorageSync('IOS_FIRST_CAMERA')if (this.phoneType === 'ios' && isIosTrue !== 'false') {// 设为false就代表不是第一次开启相机uni.setStorageSync('IOS_FIRST_CAMERA', 'false')}uni.chooseImage({sizeType: "compressed",// 选择图片的数量count: 1,success: res => {// console.log(res.tempFilePaths[0])this.imgBg = res.tempFilePaths[0]this.imgBgArray = res.tempFilePathsthis.app_img(0, res)},})},// 图片压缩//（这里实际上一开始是要求选择多张图片的，所以将res作为一个数组进行的处理，// 后期需求变更,写的比较急，就没改，直接给num传了一个0，默认从数组第一个开始，// 然后通过判断数组的length来直接return掉。）app_img(num, res) {let that = thisif (Number(num) === Number(res.tempFiles.length)) {return}let index = res.tempFiles[num].path.lastIndexOf(".")let img_type = res.tempFiles[num].path.substring(index, res.tempFiles[num].path.length)let img_yuanshi = res.tempFiles[num].path.substring(0, index)let d2 = new Date().getTime()plus.zip.compressImage({src: res.tempFiles[num].path,dst: img_yuanshi + d2 + img_type,quality: 10}, function(e) {that.imgBgArr = e.targetthat.postImg(that.imgBgArr)that.app_img(num + 1, res)})},// 删除图片deleteImg() {this.imgBg = ''this.imgBgAr = ''this.imgBgArrUrl = ''},// 点击图片bindImg() {if(this.imgBgArray.length !== 0){console.log(index)uni.previewImage({urls: this.imgBgArray,current: 0})}},
// 上传图片postImg(imgFilePaths) {uni.uploadFile({url: baseUrl.apiUrl + '/xxx/xxx',filePath: imgFilePaths,name: 'file',success: (uploadFileRes) => {let imgValue = JSON.parse(uploadFileRes.data)this.imgBgArrUrl = imgValue.data.absoluteUrlthis.imgBgUrl = imgValue.data.url}});},

uniapp实现图片上传相关推荐

关于uniapp多图片上传和单图片上传
记录小知识 uniapp的多图片上传方法和单图片上传方法本质是一样的,无非就是你循环或者祂帮你循环单图片上传:传递一个需要上传的图片链接多图片上传:传递一个需要上传的图片组成的数组单图片方式实现 ...
uniapp uview 图片上传
<template><view><view class="li-price" @click="toggle('center')"& ...
uniapp实现图片上传和回响配合uview组件
<template><view class="pageContainer"><!-- 注意,如果需要兼容微信小程序,最好通过setRules方法设置r ...
uniapp 微信小程序开发图片上传压缩
uniapp 微信小程序开发图片上传压缩安卓上传图片并压缩思路全部代码安卓上传图片并压缩由于后端接口对图片的大小有限制,所以在上传图片是需要压缩处理: uni.chooseImage({c ...
uniapp 图片上传与展示
项目场景: uniapp 图片上传阿里 OSS 对象存储需求描述: H5移动端开发中需要用户上传图片头像.身份证件等需求时.需要将图片上传至阿里oss中存储,并且下载到当前页面进行展示. 解决方 ...
uniapp 图片上传删除
uniapp我的示例:如下点击加号图片:选择上传类型:图片或者文件上传的图片可以删除这是界面上的一系列操作,接下来我们来看如何代码实现吧一.界面代码:展示图片 <view class=& ...
uniApp 生成微信小程序图片上传提示 fail url not in domain list 的解决方法
问题表现: uniApp 生成微信小程序,获取内容程序不报错,但是图片上传提示 fail url not in domain list 错误. 问题分析: 微信小程序:服务器域名配置每个微信小程序需 ...
uniapp 调用手机相机拍照实现图片上传
uniapp 调用手机相机拍照实现图片上传参考资料:https://blog.csdn.net/weixin_46391646/article/details/108450898 调用相机相册 un ...
uni-app知识点整理（5）- 网络请求、数据缓存、图片上传和预览
目录一.网络请求 1.1 发送get请求二.数据缓存 2.1 uni.setStorage(OBJECT) 2.2 uni.setStorageSync(KEY,DATA) 2.3 uni.get ...

uniapp实现图片上传

uniapp实现图片上传相关推荐

最新文章

热门文章