小程序开发笔记《五》上传图片、预览图片
上传图片是日常项目中经常遇到的功能，需要使用到wx.chooseImage(Object object)函数。
参数说明如下：
实现思路：
先调用小程序打开相机或从相册选图接口wx.chooseImage(Object object)，然后将返回的图片参数调用图片上传接口wx.uploadFile(Object object)，并将图片回显到页面，对图片绑定预览事件，预览的过程中用户可以进行保存图片、发送给朋友等操作。
js代码：
Page({
/**
* 页面的初始数据
*/
data: {
imgUrl:""
},
bigImage: function(e) {
var src = e.currentTarget.dataset.src;
var imgList = [];
imgList.push(src);
//图片预览
wx.previewImage({
current: src, // 当前显示图片的http链接
urls: imgList // 需要预览的图片http链接列表
})
},
uploadPic: function() {
var that_ = this;
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths
//请求上传图片接口
wx.uploadFile({
url: "url", //仅为示例，非真实的接口地址
header: {
'Authorization': wx.getStorageSync('Authorization')
},
filePath: tempFilePaths[0],
name: 'uploadFile',
formData: {
'fileType': 'image',
'resStr': JSON.stringify({
remark: "上传照片"
}).replace(/\"/g, "'")
},
success(res) {
var data = JSON.parse(res.data)
console.log("data:" + res.data);
if (data.data.ok == 1) {
that_.setData({
imgUrl: data.data.res.remoteUrl,
})
} else {
wx.showToast({
title: (data.data.msg),
icon: 'none',
duration: 1000,
mask: true
});
}
}
})
}
})
}
})
wxml:
原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe
发表评论 (审核通过后显示评论)：