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

作业摘要

目录：

微信小程序前端技术总结

技术概述

技术详述

技术使用中遇到的问题和解决过程

总结

列出参考文献、参考博客

微信小程序前端技术总结

技术概述

技术详述

逐梦校友圈的开发我们统一使用vant-weapp组件库,首先在页面配置json中引入该组件

"usingComponents": {
"van-uploader": "@vant/weapp/uploader/index"
},


新建uploader相关page，在uploade.wxml添加的上传组件

file-list绑定的是上传的文件列表，bind:after-read绑定图片读取后的事件，bind:delete绑定删除图片事件,multiple是否支持多上传功能，默认为false,还需要在uploade.js增加相关的逻辑

上传地址配置

配置上传的初始化值

data: {
fileList: [] //需要上传的图片列表
},


新建项目配置文件config/index.js

export default {
uploadUrl: `` //填写服务器地址
}


在使用的页面中导入配置文件

import config from 'path/to/config/index' //相对路径


封装上传图片函数

为每上传一张图片返回promise任务

uploadFile(uploadFile) {
return new Promise((resolve, reject) => {
wx.uploadFile({
url: config.uploadUrl, // 上传的服务器接口地址
filePath: uploadFile,
name: 'file', //上传的所需字段，后端提供
success: (res) => {
// 上传完成操作
const data = JSON.parse(res.data)
const url = data.data.url
resolve({
url: url
})
},
fail: (err) => {
//上传失败：修改pedding为reject
reject(err)
}
});
})
},


实现上传操作函数

编写上传图片后的操作函数，可以为每一张上传的图片作为一次promise任务，等待全部的promise执行完毕才上传成功，否则失败

afterRead(event) {
wx.showLoading({
title: '上传中...'
})
const { file } = event.detail //获取所需要上传的文件列表
let uploadPromiseTask = [] //定义上传的promise任务栈
for (let i = 0;i uploadPromiseTask.push(this.uploadFile(file[i].path)) //push进每一张所需要的上传的图片promise栈
}
Promise.all(uploadPromiseTask).then(res => {
//全部上传完毕
this.setData({
fileList: this.data.fileList.concat(res)
})
wx.hideLoading()
}).catch(error => {
//存在有上传失败的文件
wx.hideLoading()
wx.showToast({
title: '上传失败！',
icon: 'none',
})
})
}


删除图片操作函数

绑定相对应的删除图片事件

deleteImg(event) {
const delIndex = event.detail.index
const { fileList } = this.data
fileList.splice(delIndex, 1)
this.setData({
fileList
})
}


技术使用中遇到的问题和解决过程

刚开始写的没有成功，图片显示成功上传到服务器但并没有加载出来。于是用FileSystemManager方法进行改写。

通过 wx.getFileSystemManager() 可以获取到全局唯一的文件系统管理器，所有文件系统的管理操作通过 FileSystemManager 来调用。

var FSM = wx.getFileSystemManager();
let imageType=getApp().getImageType(e.url);
promiseArr.push(
new Promise(function (resolve,reject) {
FSM.readFile({
filePath: e.url,
encoding: "base64",
success: function (data) {
wx.request({
url: app.globalData.baseUrl+'/api/posts/imgupload',
method: "POST",
data: {
base64Str: imageType + data.data,
filename: "111"
},
success: function (res) {
console.log(res);
console.log("上传图片成功");
if(res.data.code==200)
{
return resolve(res);
}
else{
return reject(res.data.message);
}
},
fail: function (e) {
console.log(e);
console.log("上传图片失败");
return reject(e)
},


总结

虽然只是实现图片的upload，但是图片显示成功上传到服务器但并没有加载出来这个问题困扰了很久，找不出问题后我尝试用其他方法进行重写，花费了不少的时间。总的来说还是要理解网络上的代码模板，然后根据自己的开发项目进行修改。

列出参考文献、参考博客

微信小程序开发官方文档

uploader官方文档