微信小程序实现上传图片功能

为了能更好地讲解实现上传图片功能的攻略，我会先介绍一下常用的两种上传方式，再分别对其进行示例说明，最后提供具体的代码实现。

常见的图片上传方式

• 表单上传

  表单上传是指通过表单提交的方式将图片上传至服务器，传统的网页上传图片一般采用表单上传的方式。文件上传需要使用input元素, 其中type属性设为file。在提交表单时，浏览器会把文件的二进制数据打包成 MIME 数据，然后使用 HTTP 协议，将这些数据发送给服务器。

• AJAX上传

  AJAX 上传使用 XMLHttpRequest 对象与服务器进行交互。与表单上传相比，它可以不用刷新页面即可将数据上传至服务器，并且可以处理文件的上传进度。

接下来我会以微信小程序为例介绍实现上传图片功能的攻略。

微信小程序实现上传图片功能

方式一：使用 wx.chooseImage API

微信小程序提供了wx.chooseImageAPI，可以让用户选择本地图片或使用相机拍照，返回一个本地临时文件路径列表，我们只需要将文件上传至服务器即可。以下是具体步骤：

1. 在<button>标签中设置chooseImage事件回调函数：

<button bindtap="uploadImage">选择图片并上传</button>

1. 在事件回调函数中调用wx.chooseImageAPI选择本地图片并保存到定义的localImage变量中：

uploadImage: function() {
var that = this;
wx.chooseImage({
success: function(res) {
that.setData({
localImage: res.tempFilePaths[0]
});
}
});
}

1. 调用wx.uploadFileAPI将本地图片上传至服务器：

uploadImage: function() {
var that = this;
wx.chooseImage({
success: function(res) {
that.setData({
localImage: res.tempFilePaths[0]
});
// 将本地图片上传至服务器
wx.uploadFile({
url: '/upload',
filePath: that.data.localImage,
name: 'image',
success: function(res) {
console.log(res.data);
},
fail: function(res) {
console.log(res.errMsg);
}
});
}
});
}

在上传过程中，可以通过progress事件获得上传进度。

方式二：使用封装好的图片上传插件

如果要实现一个比较复杂的上传图片功能，可以使用封装好的图片上传插件。以下是具体步骤：

1. 引入图片上传插件。

var upload = require('./upload.js');

1. 创建一个imageUploader对象并配置相关参数。

var imageUploader = upload.create({
url: '/upload',
limit: 5,
complete: function(files) {
console.log(files);
}
});

可以设置图片上传地址、图片上传数量上限和上传完成的回调函数等。

1. 调用imageUploader.upload方法上传图片。

imageUploader.upload();

这样，就可以通过图片上传插件实现上传图片的功能。

代码实现

1. 使用 wx.chooseImage API 的代码示例：

Page({
data: {
localImage: ''
},
uploadImage: function() {
var that = this;
wx.chooseImage({
success: function(res) {
that.setData({
localImage: res.tempFilePaths[0]
});
// 将本地图片上传至服务器
wx.uploadFile({
url: '/upload',
filePath: that.data.localImage,
name: 'image',
success: function(res) {
console.log(res.data);
},
fail: function(res) {
console.log(res.errMsg);
}
});
}
});
}
});

1. 使用封装好的图片上传插件的代码示例：

var upload = require('./upload.js');
var imageUploader = upload.create({
url: '/upload',
limit: 5,
complete: function(files) {
console.log(files);
}
});
Page({
uploadImage: function() {
imageUploader.upload();
}
});

这就是实现上传图片功能的攻略了，希望能对你有所帮助。