uniapp中上传图片并实时预览

这里只做记录，详细的api请看官方文档
html

<view class="pop-contain"><scroll-view scroll-y class="item-contain"><view class="padding-sm"><!-- <image :src="paidImgUrl"  mode=""></image> --><img class="paidImgCon" :src="paidImgUrl"><view class="paid-btn" v-if="paidImgUrl==''" @click="insertImage">上传</view><view class="paid-btn" v-else @click="insertImage">更新</view></view></scroll-view><view class="pop-paidImg"><view class="pop-paidImg-sure" @tap="cancelAddBtn">关闭</view></view>
</view>

对应函数

insertImage() {let that = this;uni.chooseImage({count: 1,success: (res) => {this.paidImgUrl="";this.showLoading("图片上传中");//上传文件的临时路径console.log("that.paidDdid");console.log(this.paidDdid)const tempFilePaths = res.tempFilePaths;uni.uploadFile({url: that.api.FKJTUpload+"&ddid="+that.paidDdid,filePath: tempFilePaths[0],name: 'file',success: (uploadFileRes) => {console.log("上传图片1111");console.log(uploadFileRes);uni.hideLoading();const back = JSON.parse(uploadFileRes.data);if(back.status=="0"){that.paidImgUrl = that.host+back.filepath[0];console.log(that.paidImgUrl);}else{that.showToast(back.msg)}},fail:() =>{uni.hideLoading();that.showToast("图片上传失败，请联系开发！")}});}})
},

图片上传的时候再带着参数，没有使用官方的

formData:{"ddid":that.paidDdidl
},

而是写在了URL里面
that.api.FKJTUpload+"&ddid="+that.paidDdid

uniapp中上传图片并实时预览相关推荐

使用Visual Studio 2022中的Web实时预览设计Web窗体应用程序
目录新的Web表单设计器完全支持最新的浏览器技术使用实时数据而不是"占位符"数据进行预览选择一个控件导航到源源文件的实时更新操作面板支持从工具箱中拖放更改设计器表面 ...
uniapp中上传图片（拍摄）和预览图片(图例和示例代码)
uniapp中上传图片和预览图片图例: 示例代码: 内容 uni.chooseImage上传图片 uni.previewImage预览图片复习下uniapp的上传图片和预览图片需求:可以拍摄和上 ...
如何在WordPress中显示链接的实时预览
Have you ever seen sites that show a live preview of links when you bring your mouse over them? That ...
VSCode中安装Live Server插件实现Html网页代码的实时预览
VSCode中安装Live Server插件实现Html网页代码的实时预览利用寒假时间学习了一些基本的网页知识,在编写Html代码时可以利用IDEA.WebStorm.Dream Weaver等工具 ...
海康威视实时预览回调PS流用EasyRTMP向RTMP服务器推流中视频数据处理的代码
在上一篇方案<EasyRTMP结合海康HCNetSDK获取海康摄像机H.264实时流并转化成为RTMP直播推流(附源码)>我们介绍了将海康安防摄像机进行互联网直播的整体方案流程,其中有一个 ...
海康威视摄像机SDK二次开发--实时预览视频流保存到指定文件中
开发海康威视sdk ,IPC设备,视频回调用的是官方提供的Demo中的(fRealDataCallBack ) 在最下面代码可以设置Thread.sleep()设置拍摄时长文件结构 CameraIn ...
EasyRTMP：RTMP推流海康威视实时预览回调PS流用EasyRTMP向RTMP服务器推流中视频数据处理的代码
在上一篇方案<EasyRTMP结合海康HCNetSDK获取海康摄像机H.264实时流并转化成为RTMP直播推流(附源码)>中我们介绍了将海康安防摄像机进行互联网直播的整体方案流程,其中有一 ...
Java海康威视摄像头实时预览视频流保存到指定文件中
海康威视摄像头实时预览视频流保存到文件中目前在开发海康威视sdk ,IPC设备,视频回调用的是官方提供的Demo中的(fRealDataCallBack ) 在最下面代码可以设置Thread.sle ...
itextpdf中文不显示_LaTeX实时预览中文
参考资料:http://blog.sina.com.cn/s/blog_6ea58f530101aizw.html 先说一下我的解决方案(Texpad + CJK packages) Texpad是m ...

uniapp中上传图片并实时预览

uniapp中上传图片并实时预览相关推荐

最新文章

热门文章