微信小程序如何上传图片

微信小程序上传图片，并预览

<image src="{{tempFilePaths[0]}}"></image>
<form bindsubmit="radioselect"><!-- <radio-group bindchange="radioselect"> --><radio-group name="cat_name"><view wx:for="{{items}}" wx:key="item"><radio value = "{{item.value}}" checked="checked"></radio><view>{{item.name}}</view></view></radio-group><input class='input-radius' focus="true" type = "text" confirm-type="done" value = "" name = "cats_name" bindconfirm = "up" placeholder="请输入衣服名称" /><button form-type="submit" plain="true">提交</button>
</form>
<button form-type="submit" bindtap="upimg" class='jia_img' plain="true" size="default">上传</button>
<!-- 请重新提交表单信息 -->
<view>{{errradioselect}}</view>
<!-- 提交衣服种类信息 -->
<view>{{usercloth.cat_name}}:{{usercloth.cats_name}}</view>
<!-- 上传成功提示信息 -->
<view>{{tips}}</view>

Page({data: {tempFilePaths: [],tips:"",items: [{value: '无分类', name: '无分类'},{value: '上衣', name: '上衣', checked: 'true'},{value: '下装', name: '下装'},{value: '鞋子', name: '鞋子'} ],usercloth:"",errradioselect:""},//上传图片upimg() {var that = this;// 显示操作菜单wx.showActionSheet({itemList: ['拍照', '从相册中选择'],success(res) {console.log(res.tapIndex)if (res.tapIndex == 0) { //0是拍照wx.chooseImage({count: 1,sizeType: ['compressed'],sourceType: ['camera'],success: function(res) {//res.tempFilePaths[0] 这个是图片var tempFilePaths = res.tempFilePaths ;//图片var tips ="上传图片成功" ;that.setData({tempFilePaths: tempFilePaths,tips})that.up()},})} else if (res.tapIndex == 1) {wx.chooseImage({count: 1,sizeType: ['compressed'],sourceType: ['album'],success: function(res) {//res.tempFilePaths[0] 这个是图片var tempFilePaths = res.tempFilePaths //图片var tips ="上传图片成功" ;that.setData({tempFilePaths: tempFilePaths,tips})that.up()},})}}})},//提交衣服信息radioselect(e){const usercloth = e.detail.value;console.log(usercloth)var user_cats_name = usercloth.cats_nameif(user_cats_name ==''){wx: wx.showToast({title: '请重新提交',icon:"error",success:res =>{var res = "请填写完整信息";this.setData({errradioselect:res})}})}else{this.setData({usercloth:usercloth})wx: wx.showToast({title: '请上传图片'})wx.request({url: '', //提交衣服种类路径method:'GET',data:{usercloth:e.detail.value},header: {'content-type': 'application/json' // 默认值},success (res) {// console.log(res.data)}})}},//提交数据up() {console.log("this",this.data)var usercloth = this.data.usercloth// console.log(usercloth)var openid = wx.getStorageSync('openid')// console.log(openid)var tempFilePaths = this.data.tempFilePaths;// console.log("tempFilePaths"+tempFilePaths)wx.getFileSystemManager().readFile({filePath:tempFilePaths[0],encoding:'base64',success:res =>{// console.log('data:image/png;base64,' + res.data)// console.log(res.data)var tempFilePathss = 'data:image/png;base64,' + res.data// var tempFilePathss = res.data// console.log("tempFilePathss",tempFilePathss)var img_data = tempFilePathss// const add = [];// add.img_data = img_data;// add.usercloth = userclothusercloth.img_data= img_datausercloth.openid = openidconsole.log(usercloth)// console.log("img_data",img_data)wx.request({url: 'https://qc3752.api.cloudendpoint.cn/addimg', //添加衣服页面路径data:usercloth,method:'post',success: function(res) {console.log(res)},// fail(res) {//   console.log(res)// }})}})}
})

/* pages/add/add.wxss */
button{margin-top: 50rpx;
}
image{border:#FBD2D6 solid 2.0rpx;margin-left: 50rpx;margin-top: 50rpx;
}
radio-group{margin-left: 60rpx;display:flex;text-align: center;
}
radio{width:100rpx;
}
.input-radius{border-radius: 30rpx;margin: 10rpx 0 50rpx 30rpx;width: 450rpx;background-color: #FBD2D6;height:70rpx;}

微信小程序如何上传图片相关推荐

微信小程序原生上传图片封装
资源参考组件免费下载地址概述微信小程序原生上传图片功能封装,具体使用根据个人情况而定. 组件自定义属性与方法描述 isShow:布尔值,默认为true true:不显示上传图标 false:显示 ...
微信小程序拍照上传图片
微信小程序拍照上传图片或头像在使用微信小程序时需要用到手机拍照来上传图片或者头像时在method中定义一个方法获取图片路径,将路径赋值到image中方法如下: takePhoto() {cons ...
php 限制图片大小代码,微信小程序在上传图片时如何限制大小（附代码）
本篇文章给大家带来的内容是关于微信小程序在上传图片时如何限制大小(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 最近有一个微信小程序的项目,要求是上传多张图片,数量不能超过 ...
微信小程序上传图片到html,在微信小程序里上传图片
在微信小程序里上传图片. 上传图片 JS//index.js Page({ data:{ tempFilePaths:[], uploadLinks:[], }, uploadImg() { var ...
微信小程序上传图片到服务器总是失败_微信小程序怎么上传图片到服务器?
微信小程序怎么上传图片到服务器?相信很多人都会把小程序图片保存到本地吧,但是把图片上传到服务器就不一定了,下面一起随小编看看微信小程序怎么上传图片到服务器吧. 微信小程序怎么上传图片到服务器? 首先, ...
【微信小程序】上传图片到oss对象存储（PHP）
oss准备第一步:先去阿里云买个oss 第二步:看oss的文档先点这里再点这里想办法把SDK下载下来,下面是SDK的目录结构重点要注意的就是上面的红圈里面的文件. 继续看官方文档从上面的代 ...
微信小程序/网站上传图片到腾讯云COS
COS简介: 腾讯云提供的一种对象存储服务,供开发者存储海量文件的分布式存储服务.可以将自己开发的应用的存储部分全部接入COS的存储桶中,有效减少应用服务器的带宽消耗等.个人也可以通过腾讯云账号免费使 ...
uniapp开发——微信小程序获取上传图片的拍摄时间（附源码）
如果是单纯地使用uniapp做app或者h5开发,可以直接在上传的时候 uni.chooseImage 获取到图片的最后修改日期,那么可以使用其作为拍摄日期. 但是,一切的一切都源于微信小程序的接口封 ...
微信小程序批量上传图片
笔记一刚接触小程序,公司要实现的功能类似于微信发布动态功能,其中图片需要批量上传,查阅了大量资料都是通过循环实现.一开始循环了一张就存一张,写完发现这个方法有点太寸了,想着能不能将数据转成集合一次存 ...
uniapp 微信小程序 api上传图片 binary (form Data)
//生成分割字符串generateDivisionStr() {return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c =&g ...

微信小程序如何上传图片

微信小程序如何上传图片相关推荐

最新文章

热门文章