微信小程序van-uploader实现图片上传功能
微信小程序van-uploader实现图片上传功能
作业摘要
这个作业属于哪个课程 | 2021春软件工程实践|S班 (福州大学) |
---|---|
这个作业要求在哪里 | 软件工程实践总结&个人技术博客 |
这个作业的目标 | 总结软件工程实践 |
作业正文 | 作业正文 |
其他参考文献 | CSDN |
目录:
微信小程序前端技术总结
技术概述
技术详述
技术使用中遇到的问题和解决过程
总结
列出参考文献、参考博客
微信小程序前端技术总结
技术概述
这个技术是做什么的/什么情况下会使用到这个技术 | 将图片的信息上传到服务器 |
---|---|
学习该技术的原因 | 在开发微信小程序中,用户头像上传和用户身份验证的上传都要用到这个功能 |
技术的难点在哪里 | 要实现传参、多图传输、删除、预览等多个功能 |
技术详述
逐梦校友圈的开发我们统一使用vant-weapp组件库,首先在页面配置json中引入该组件
"usingComponents": {
"van-uploader": "@vant/weapp/uploader/index"
},
新建uploader相关page
,在uploade.wxml添加的上传组件
<view class="uploader">
<van-uploader file-list="{{ fileList }}" bind:after-read="afterRead" bind:delete="deleteImg" multiple="{{true}}" />
</view>
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 < file.length;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,但是图片显示成功上传到服务器但并没有加载出来这个问题困扰了很久,找不出问题后我尝试用其他方法进行重写,花费了不少的时间。总的来说还是要理解网络上的代码模板,然后根据自己的开发项目进行修改。