微信小程序能够很好的支持图片的选取和上传，但是对于文件类型，只支持从聊天中选取并上传，也算勉强满足了需求，以下就是两种不同方式的上传。
一. 图片选择上传
wxml 代码:
<view class="image-picture">
<i-avatar i-class="image-size" src="{
{photo}}" bindtap="changeImage"></i-avatar>
<view class="edit-image" bindtap="changeImage">编辑头像</view>
</view>
js 代码：
changeImage: function (e) {
var that = this;
console.log("点击编辑图片");
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths;
my.uploadFile(that, tempFilePaths, 0);
}
})
}
二. 文件选择上传
wxml 代码:
<text class="attachment" bindtap="uploadFile">{
{
attachment}}</text>
js 代码：
uploadFile: function (e) {
var that = this;
console.log("点击上传文件");
wx.chooseMessageFile({
count: 1,
type: "file",
success: function (res) {
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFiles;
my.uploadFile(that, tempFilePaths, 1);
}
})
}
代码中使用的 my.uploadFile 是通用上传服务类中的方法，需要在头部导入 MyModel 才能使用：
import {
MyModel
} from "../../../services/myModel.js";
const my = new MyModel();
三. 通用上传服务类
myModel.js
class MyModel {
/**
* 上传图片/文件
*/
uploadFile(page, path, type) {
let filePath = "";
let fileName = "";
// 0-图片；1-文件；
let params = {
'type': type
};
// 上传图片
if (type == 0) {
filePath = path[0];
} else if (type == 1) {
filePath = path[0].path;
fileName = path[0].name;
params.fileName = fileName;
}
wx.showToast({
icon: "loading",
title: "正在上传文件"
}),
wx.uploadFile({
url: api_base_url + "/uploadFile",
filePath: filePath,
name: 'file',
header: {
"Content-Type": "multipart/form-data"
},
formData: params,
success: function (res) {
if (res.statusCode != 200) {
wx.showModal({
title: '提示',
content: '文件或图片上传失败',
showCancel: false
});
return;
}
let receivedata = JSON.parse(res.data);
if (receivedata.data.state == "fail") {
wx.showModal({
title: '提示',
content: '上传失败',
showCancel: false
})
return;
}
if (type == 0) {
page.setData({
//上传成功修改显示图片(filePath 是临时生成用于显示的图片，imagePath 是后端存储的相对路径)
photo: filePath,
imagePath: receivedata.data.filePath
})
} else if (type == 1) {
let fileName = receivedata.data.fileName;
// 文件名称截取
if (fileName) {
if (fileName.length > 15) {
fileName = fileName.substr(0, 15) + "...";
}
}
page.setData({
//上传成功修改文件名显示
attachment: fileName
})
}
},
fail: function (e) {
wx.showModal({
title: '提示',
content: '文件上传失败',
showCancel: false
})
},
complete: function () {
wx.hideToast();
}
})
}
}
export {
MyModel
}