大佬教程收集整理的这篇文章主要介绍了微信小程序van-uploader实现图片上传功能，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
| 这个作业属于哪个课程@H_772_10@ | 2021春软件工程实践|S班 (福州大学)@H_772_10@ |
|---|---|
| 这个作业要求在哪里 | 软件工程实践总结&个人技术博客 |
| 这个作业的目标 | 总结软件工程实践 |
| 作业正文 | 作业正文 |
| 其他参考文献 | CSDN |
| 这个技术是做什么的/什么情况下会使用到这个技术@H_772_10@ | 将图片的信息上传到服务器@H_772_10@ |
|---|---|
| 学习该技术的原因 | 在开发微信小程序中，用户头像上传和用户身份验证的上传都要用到这个功能 |
| 技术的难点在哪里 | 要实现传参、多图传输、删除、预览等多个功能 |
逐梦校友圈的开发我们统一使用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绑定删除图片事件,@H_635_97@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，但是图片显示成功上传到服务器但并没有加载出来这个问题困扰了很久，找不出问题后我尝试用其他方法进行重写，花费了不少的时间。总的来说还是要理解网络上的代码模板，然后根据自己的开发项目进行修改。
微信小程序开发官方文档
uploader官方文档
以上是大佬教程为你收集整理的微信小程序van-uploader实现图片上传功能全部内容，希望文章能够帮你解决微信小程序van-uploader实现图片上传功能所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。