图片上传功能,首先在wxml文件中加一个按钮以及图片回显的img
wxml页面的代码:.
<block>
<input style="display:none" name = "orderImage" value='{{showImage_url}}'></input>
<button bindtap="uploadimg">+</button>
<image src='{{showImage_url}}'></image>
</block>
其次是JS文件
/*
*图片上传
**/
uploadimg: function() {
var that = this;
//选择图片
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function(res) {
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths[0]
that.setData({
showImage_url: tempFilePaths
})
//图片上传
wx.uploadFile({
url: 'http://localhost/common/uploadImg',//调用后台接口的路径
method:'POST',
filePath: that.data.showImage_url,
name: 'file',//此处注意要与后台保持一致
header: {
"Content-Type": false,
},
//formdata:adds,
success: function(res) {}
})
}
})
},
注意在page的data中
data: {
showImage_url: '',
},
这样基本一个图片上传及回显的功能就做完了,如果需要表单提交的话在JS中添加如下代码
formsubmit: function(e) {
this.setData({
orderImage: e.detail.value.orderImage,
orderText: e.detail.value.orderText
})
const wxreq = wx.request({
url: 'http://localhost/app/submitTask',//后台接口路径
data: {
'orderText': this.data.orderText,
'orderImage': this.data.showImage_url
},
method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
header: {
'Content-Type': "application/x-www-form-urlencoded",
'Cookie': 'SESSION=' + wx.getStorageSync("sessionId")
}, // 设置请求的 header
success: function (res) {
console.log("提交任务成功");
wx.navigateTo({//页面跳转
url: '/pages/index/index',
})
wx.showModal({//提示弹框
title: '提示',
content: '提交成功,请耐心等待审核。',
showCancel: false, //是否显示取消按钮
fail: function (res) { }, //接口调用失败的回调函数
complete: function (res) { }, //接口调用结束的回调函数(调用成功、失败都会执行)
})
},
fail: function () {
console.log("请求数据失败");
}
})
},
##页面上记得添加form表单,具体如下
<view class='box'>
<view class='boxcon'>
<text class='title'>文本内容:</text>
<view class='txt'>
<textarea name="orderText" placeholder="请输入" type="text"> </textarea>
</view>
<text class='title'>图片内容:</text>
<view class='imgbox'>
<block>
<input style="display:none" name = "orderImage" value='{{showImage_url}}'></input>
<button bindtap="uploadimg">+</button>
<image src='{{showImage_url}}'></image>
</block>
</view>
</view>
</view>
</view>
<view class='pagefoot'>
<button class='btnblock' form-type="submit">提交</button>
</view>
</form>
##data中添加
data: {
orderText: “”,
orderImage: “”,
showImage_url: ‘’,
},
##这样一个基本的图片上传并提交给后台的功能就做完啦