相關(guān)學(xué)習(xí)推薦：javascript（視頻）

創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計制作、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的寧安網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

使用前先new 一下所有方法均返回 promise 對象 可使用then() 寫后續(xù)業(yè)務(wù) 或 使用 async await預(yù)覽一下體驗一下

H5 地址 http://uni_upload.gek6.com/uploader/#/

服務(wù)端返回示例

{	"code":0,	"msg":"上傳成功",	"data":"http://www.test.com/uploads/20190227/f2824d2d4dc38f30699f816226b4a578.jpg"}復(fù)制代碼

直接上源碼

/*
	2019-02-27
	lane
	封裝 uni-app 圖片上傳功能
	
	使用前先new 一下
	
	所有方法均返回 promise 對象 可使用then() 寫后續(xù)業(yè)務(wù) 或 使用 async await
	
	服務(wù)端返回示例
	{		"code":0,		"msg":"上傳成功",		"data":"http://www.test.com/uploads/20190227/f2824d2d4dc38f30699f816226b4a578.jpg"
	}
	choose	選擇圖片
		參數(shù) num 為要選擇的圖片數(shù)量
	upload_one 上傳一張圖片
		參數(shù) path  選擇成功后返回的 緩存文件圖片路徑
	upload  上傳多張圖片
		參數(shù) path_arr 選擇圖片成功后 返回的圖片路徑數(shù)組
	choose_and_upload  選擇圖片并上傳
		參數(shù) num 為要選擇的圖片數(shù)量
		
*/

// 引入配置信息或者自己創(chuàng)建個 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;復(fù)制代碼

choose 選擇圖片

參數(shù) num 為要選擇的圖片數(shù)量
返回 圖片緩存路徑 數(shù)組復(fù)制代碼

upload_one 上傳一張圖片

參數(shù) path  選擇成功后返回 遠(yuǎn)程圖片路徑復(fù)制代碼

upload 上傳多張圖片

參數(shù) path_arr 選擇圖片成功后 返回遠(yuǎn)程圖片路徑數(shù)組復(fù)制代碼

choose_and_upload 選擇圖片并上傳

參數(shù) num 為要選擇的圖片數(shù)量 返回 圖片緩存路徑 數(shù)組復(fù)制代碼

了解更多其他精品文章，敬請關(guān)注uni-app欄目~

分享標(biāo)題：基于uni-app實現(xiàn)圖片上傳JS插件
當(dāng)前地址：http://www.rwnh.cn/article20/cgjsjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、網(wǎng)站營銷、企業(yè)網(wǎng)站制作、外貿(mào)建站、微信小程序、網(wǎng)站設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)