微信小程序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，但是圖片顯示成功上傳到服務器但並沒有加載出來這個問題困擾了很久，找不出問題后我嘗試用其他方法進行重寫，花費了不少的時間。總的來說還是要理解網絡上的代碼模板，然后根據自己的開發項目進行修改。