使用前先new 一下
所有方法均返回 promise 物件 可使用then() 寫後續業務 或 使用 async await
預覽一下
體驗一下
H5 地址 http://uni_upload.gek6.com/uploader/#/
服務端返回示例
{
"code":0,
"msg":"上傳成功",
"data":"http://www.test.com/uploads/20190227/f2824d2d4dc38f30699f816226b4a578.jpg"
}
複製程式碼直接上原始碼
/*
2019-02-27
lane
封裝 uni-app 圖片上傳功能
使用前先new 一下
所有方法均返回 promise 物件 可使用then() 寫後續業務 或 使用 async await
服務端返回示例
{
"code":0,
"msg":"上傳成功",
"data":"http://www.test.com/uploads/20190227/f2824d2d4dc38f30699f816226b4a578.jpg"
}
choose 選擇圖片
引數 num 為要選擇的圖片數量
upload_one 上傳一張圖片
引數 path 選擇成功後返回的 快取檔案圖片路徑
upload 上傳多張圖片
引數 path_arr 選擇圖片成功後 返回的圖片路徑陣列
choose_and_upload 選擇圖片並上傳
引數 num 為要選擇的圖片數量
*/
// 引入配置資訊或者自己建立個 config 物件
// import config from "../config.js";
let config = {
// 上傳圖片的API
upload_img_url:'http://uni_upload.gek6.com/index.php/index/upload'
}
class Uploader {
constructor() {
}
choose(num) {
return new Promise((resolve, reject) => {
uni.chooseImage({
count: num,
success(res) {
// console.log(res);
// 快取檔案路徑
resolve(res.tempFilePaths)
},
fail(err) {
console.log(err)
reject(err)
}
})
})
}
upload_one(path) {
return new Promise((resolve, reject) => {
uni.showLoading({
title:'上傳中'
})
uni.uploadFile({
url: config.upload_img_url, //僅為示例，非真實的介面地址
filePath: path,
name: 'file',
success: (uploadFileRes) => {
if("string"===typeof uploadFileRes.data){
resolve(JSON.parse(uploadFileRes.data).data)
}else{
resolve( uploadFileRes.data.data )
}
},
complete() {
uni.hideLoading()
}
});
})
}
upload(path_arr) {
let num = path_arr.length;
return new Promise(async (resolve, reject) => {
let img_urls = []
for (let i = 0; i < num; i++) {
let img_url = await this.upload_one(path_arr[i]);
console.log(img_url)
img_urls.push(img_url)
};
console.log("全部上傳成功")
resolve(img_urls)
})
}
choose_and_upload(num) {
return new Promise(async (resolve, reject) => {
let path_arr = await this.choose(num);
let img_urls = await this.upload(path_arr);
resolve(img_urls);
})
}
}
export default Uploader;
複製程式碼choose 選擇圖片
引數 num 為要選擇的圖片數量
返回 圖片快取路徑 陣列
複製程式碼upload_one 上傳一張圖片
引數 path 選擇成功後返回 遠端圖片路徑
複製程式碼upload 上傳多張圖片
引數 path_arr 選擇圖片成功後 返回遠端圖片路徑陣列
複製程式碼choose_and_upload 選擇圖片並上傳
引數 num 為要選擇的圖片數量 返回 圖片快取路徑 陣列
複製程式碼