項(xiàng)目采用uniapp與uview2.0組件庫(kù)
--1.0的也可以參考一下，大差不差
一、項(xiàng)目要求與樣式圖
點(diǎn)擊上傳n張圖片到oss，然后點(diǎn)擊提交給后端
二、思路
1、打開(kāi)上傳按鈕，彈出框內(nèi)出現(xiàn)上傳圖片和提交按鈕
2、點(diǎn)擊上傳圖片區(qū)域，打開(kāi)本地圖片或者調(diào)用相機(jī)。上傳到oss拿到返回的圖片url和本地的url地址。可以進(jìn)行預(yù)覽刪除。再點(diǎn)擊提交，將選取好的圖片地址發(fā)送給后端就ok了
一點(diǎn)特別注意，上傳接口的方法一定要是POST，問(wèn)就是小程序規(guī)定
三、代碼區(qū)域
<view>
<u-upload
:fileList="fileList1"
multiple
@afterRead="afterRead1"
@delete="deletePic1"
name="1"
:maxCount="3"
width="175" height="175" >
</u-upload>
//相關(guān)參數(shù)與公式去看view2的官方文檔我就不一一簡(jiǎn)紹了
<view>
<button class="Upstatebtn" type="default" @click="UpdateStatus">提交</button>
</view>
</view>
//data參數(shù)
//fileList1: [], //上傳圖片接受數(shù)組
//img1: [], //當(dāng)前圖片數(shù)組因?yàn)槭褂梅奖悖椭苯訌?fù)制的官網(wǎng)案例
關(guān)鍵代碼在添加圖片后上傳的兩個(gè)數(shù)組處理和本地地址還有在線圖片地址
/**
* @func 刪除圖片
* */
deletePic1(event) {
this[`fileList${event.name}`].splice(event.index, 1)
var arry = []
this.fileList1.filter((v, i) => {
arry.push(v.url)
})
this.img1 = arry
console.log(this.img1, "1");
},
/**
* @func 新增圖片上傳 讀取后的處理函數(shù)
* */
async afterRead1(event) {
// 當(dāng)設(shè)置 mutiple 為 true 時(shí), file 為數(shù)組格式，否則為對(duì)象格式
let lists = [].concat(event.file)
console.log('list',lists);
let fileListLen = this[`fileList${event.name}`].length
lists.map((item) => {
this[`fileList${event.name}`].push({
...item,
status: 'uploading',
message: '上傳中'
})
})
for (let i = 0; i < lists.length; i++) {
const result = await this.uploadFilePromise1(lists[i].url)
console.log('result是',result);
let item = this[`fileList${event.name}`][fileListLen]
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
status: 'success',
message: '',
url: result[0]
}))
fileListLen++
}
var arry = []
this.fileList1.filter((v, i) => {
console.log('每一個(gè)v是什么',v);
arry.push(v.url)
})
this.img1 = arry
console.log(this.img1, "1");
},
/**
* @func 上傳圖片到oss,只提供files,后端完成上傳
* */
uploadFilePromise1(url) {
return new Promise((resolve, reject) => {
let a = uni.uploadFile({
url: '',//后端接口地址，后端解決了oss相關(guān)密鑰獲取
filePath: url,
name: 'files',
success: (res) => {
console.log(res.data);
//這里使用JSON.parse是數(shù)據(jù)返回的問(wèn)題需要進(jìn)行轉(zhuǎn)換，官網(wǎng)是不需要進(jìn)行轉(zhuǎn)換的，未了配合提交接口上傳一個(gè)oss返回的圖片列表數(shù)據(jù)
console.log(JSON.parse(res.data));
setTimeout(() => {
resolve(JSON.parse(res.data).data) //服務(wù)器返回圖片帶域名
//服務(wù)器返回圖片不帶域名需要自己拼接域名 否則預(yù)覽圖片無(wú)法實(shí)現(xiàn)
// resolve('服務(wù)器域名' + JSON.parse(res.data).data)
}, 1000)
}
});
})
},
/**
* @func 上傳圖片地址給后臺(tái)端修改狀態(tài)
* */
UpdateStatus() {
let params = {
id: this.Upid,
fileList: this.img1
}
if (this.img1.length > 0) {
//后端需要的數(shù)據(jù)格式，因?yàn)槲易约貉h(huán)時(shí)候做了調(diào)整不要要這個(gè)方法了。
//后端要什么格式數(shù)據(jù)自己商定
// params.fileList = this.img1.reduce((arr, cur) => arr.concat((cur), []))
GetBudgetUpdate(params).then(res => {
if (res == true) {
//上傳成功后清空params數(shù)據(jù)，關(guān)閉彈框，刷新列表，提示成功
this.img1 = []
this.taskList = []
this.page = 1
this.getBudgetList()
this.showUp = false
uni.showToast({
title: `上傳成功`,
icon: 'none',
duration: 2000,
})
}
})
} else {
uni.showToast({
title: `至少需要上傳一張交付物圖片`,
icon: 'none',
duration: 2000
})
}
},
/**
* @func 上傳圖片取消,彈框關(guān)閉
* */
closePup(){
this.showUp=false
this.img1=[]
this.fileList1=[]
this.Upid=''
},四、遇到的問(wèn)題和處理
第一次使用時(shí)候遇到一個(gè)問(wèn)題是點(diǎn)擊預(yù)覽圖片失敗了，因?yàn)槲尹c(diǎn)擊圖片傳遞調(diào)用uview組件源碼方法所傳遞的值類(lèi)型不一樣? ??url: result[0]
這一行代碼卡了我這個(gè)菜雞2天，我一直認(rèn)為數(shù)據(jù)格式?jīng)]問(wèn)題，直接修改了下方的源碼判斷，，本來(lái)是url: result。直接添加了數(shù)組里的數(shù)組，然后傳值給后端img1數(shù)組時(shí)候
// params.fileList = this.img1.reduce((arr, cur) => arr.concat((cur), []))
const a = [ ["1"],["2"],["3"],["4"] ]
//變成
const b =["1","2","3","4"]
?const b = a .reduce((arr, cur) => arr.concat((cur), []));嵌套數(shù)組合并回去了
?
for (let i = 0; i < lists.length; i++) {
const result = await this.uploadFilePromise1(lists[i].url)
console.log('result是',result);
let item = this[`fileList${event.name}`][fileListLen]
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
status: 'success',
message: '',
url: result[0]
}))
fileListLen++
}?uni.PreviewImage方法需要的是這樣的數(shù)據(jù)格式，拿里面的url地址或者thumb地址
// 預(yù)覽圖片
onPreviewImage(item) {
if (!item.isImage || !this.previewFullImage) return
uni.previewImage({
// 先f(wàn)ilter找出為圖片的item，再返回filter結(jié)果中的圖片url
urls: this.lists.filter((item) => this.accept === 'image' || uni.$u.test.image(item.url || item.thumb)).map((item) => item.url || item.thumb),
current: item.url || item.thumb,
// urls: this.lists.filter((item) => this.accept === 'image' || uni.$u.test.image(item.thumb || item.url)).map((item) => item.thumb || item.url),
current: item.thumb || item.url,
fail() {
uni.$u.toast('預(yù)覽圖片失敗')
},
});
},五--感謝??小李小李，知書(shū)達(dá)理的思路與寫(xiě)法
借鑒的這個(gè)文章文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-720974.html
uniapp利用uview2.0中的uploadFile組件實(shí)現(xiàn)多張圖片的增刪預(yù)覽上傳功能-CSDN博客文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-720974.html
到了這里，關(guān)于uniapp--點(diǎn)擊上傳圖片到oss再保存數(shù)據(jù)給后端接口的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
