1.先在前端写一个选择图片的区域来触发wx.chooseImage接口并用wx.setStorage接口把图片路径存起来。
-wxml
<view class=
"shangchuan"
bindtap=
"choose"
>
<image style=
"width:100%;height:100%;"
src=
"{{tempFilePaths}}"
></image>
</view>
<button formType=
'submit'
class=
"fabu"
>发布项目</button>
/**选择图片 */
choose:
function
() {
var
that =
this
wx.chooseImage({
count: 1,
sizeType: [
'original'
,
'compressed'
],
// 可以指定是原图还是压缩图,默认二者都有
sourceType: [
'album'
,
'camera'
],
// 可以指定来源是相册还是相机,默认二者都有
success:
function
(res) {
var
tempFilePaths = res.tempFilePaths
that.setData({
tempFilePaths: res.tempFilePaths
})
console.log(res.tempFilePaths)
wx.setStorage({ key:
"card"
, data: tempFilePaths[0] })
}
})
},
2.使用wx.uploadFile将刚才上传的图片上传到服务器上
formSubmit2:
function
(e) {
var
that =
this
var
card = wx.getStorageSync(
'card'
)
wx.uploadFile({
url: app.globalData.create_funds,
filePath: card,
name:
'card'
,
formData: {
'user_id'
: app.globalData.user_id,
'person'
: e.detail.value.person,
'company'
: e.detail.value.company,
},
success:
function
(res) {
console.log(res)
}
})
}
}
},
3.选取图片
wx.chooseImage({
sizeType: [],
// original 原图,compressed 压缩图,默认二者都有
sourceType: [],
// album 从相册选图,camera 使用相机,默认二者都有
success:
function
(res) {
console.log(res);
var
array = res.tempFilePaths,
//图片的本地文件路径列表
}
})
4.上传图片
wx.uploadFile({
url:
''
,
//开发者服务器的 url
filePath:
''
,
// 要上传文件资源的路径 String类型!!!
name:
'uploadFile'
,
// 文件对应的 key ,(后台接口规定的关于图片的请求参数)
header: {
'content-type'
:
'multipart/form-data'
},
// 设置请求的 header
formData: { },
// HTTP 请求中其他额外的参数
success:
function
(res) {
},
fail:
function
(res) {
}
})
代码示例
// 点击上传图片
upShopLogo:
function
() {
var
that =
this
;
wx.showActionSheet({
itemList: [
'从相册中选择'
,
'拍照'
],
itemColor:
"#f7982a"
,
success:
function
(res) {
if
(!res.cancel) {
if
(res.tapIndex == 0) {
that.chooseWxImageShop(
'album'
)
}
else
if
(res.tapIndex == 1) {
that.chooseWxImageShop(
'camera'
)
}
}
}
})
},
chooseWxImageShop:
function
(type) {
var
that =
this
;
wx.chooseImage({
sizeType: [
'original'
,
'compressed'
],
sourceType: [type],
success:
function
(res) {
/*上传单张
that.data.orderDetail.shopImage = res.tempFilePaths[0],
that.upload_file(API_URL + 'shop/shopIcon', res.tempFilePaths[0])
*/
/*上传多张(遍历数组,一次传一张)
for (var index in res.tempFilePaths) {
that.upload_file(API_URL + 'shop/shopImage', res.tempFilePaths[index])
}
*/
}
})
},
upload_file:
function
(url, filePath) {
var
that =
this
;
wx.uploadFile({
url: url, //必填
filePath: filePath, //必填
name:
'uploadFile', //必填 跟controller里参数名对应
header: {
'content-type'
:
'multipart/form-data'
},
// 设置请求的 header
formData: {
'shopId'
: wx.getStorageSync(
'shopId'
) },
// HTTP 请求中其他额外的 form data
success:
function
(res) {
wx.showToast({
title:
"图片修改成功"
,
icon:
'success'
,
duration: 700
})
},
fail:
function
(res) {
}
})
},