목차
New before use
모든 메소드는 promise 객체를 반환하기 위해 then()을 사용하거나 async wait
미리보기 해보자
H5 주소 http://uni_upload.gek6.com/uploader/#/
参数 path  选择成功后返回 远程图片路径复制代码
로그인 후 복사
" >
参数 path  选择成功后返回 远程图片路径复制代码
로그인 후 복사
参数 path_arr 选择图片成功后 返回远程图片路径数组复制代码
로그인 후 복사
" >
参数 path_arr 选择图片成功后 返回远程图片路径数组复制代码
로그인 후 복사
参数 num 为要选择的图片数量 返回 图片缓存路径 数组复制代码
로그인 후 복사
더 많은 고퀄리티 글을 보시려면 " >
参数 num 为要选择的图片数量 返回 图片缓存路径 数组复制代码
로그인 후 복사
더 많은 고퀄리티 글을 보시려면
웹 프론트엔드 uni-app uni-app 기반 이미지 업로드 JS 플러그인 구현

uni-app 기반 이미지 업로드 JS 플러그인 구현

Sep 28, 2020 pm 04:05 PM
uni-app

uni-app 기반 이미지 업로드 JS 플러그인 구현

관련 학습 권장사항: javascript(동영상)

New before use
모든 메소드는 promise 객체를 반환하기 위해 then()을 사용하거나 async wait
를 사용할 수 있습니다.

미리보기 해보자

uni-app 기반 이미지 업로드 JS 플러그인 구현

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;复制代码
로그인 후 복사
사진 선택

参数 num 为要选择的图片数量
返回 图片缓存路径 数组复制代码
로그인 후 복사

upload_one 사진 업로드
参数 path  选择成功后返回 远程图片路径复制代码
로그인 후 복사
upload 여러 장 업로드
参数 path_arr 选择图片成功后 返回远程图片路径数组复制代码
로그인 후 복사
choose_and_upload 사진을 선택해 업로드
参数 num 为要选择的图片数量 返回 图片缓存路径 数组复制代码
로그인 후 복사
더 많은 고퀄리티 글을 보시려면
uni-app
컬럼을 주목해주세요~

위 내용은 uni-app 기반 이미지 업로드 JS 플러그인 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

VSCode에서 uni-app을 개발하는 방법은 무엇입니까? (튜토리얼 공유) VSCode에서 uni-app을 개발하는 방법은 무엇입니까? (튜토리얼 공유) May 13, 2022 pm 08:11 PM

VSCode에서 uni-app을 개발하는 방법은 무엇입니까? (튜토리얼 공유)

uniapp을 사용하여 간단한 지도 탐색 개발 uniapp을 사용하여 간단한 지도 탐색 개발 Jun 09, 2022 pm 07:46 PM

uniapp을 사용하여 간단한 지도 탐색 개발

uniapp을 활용하여 스네이크 게임을 개발하는 방법에 대해 이야기해보겠습니다! uniapp을 활용하여 스네이크 게임을 개발하는 방법에 대해 이야기해보겠습니다! May 20, 2022 pm 07:56 PM

uniapp을 활용하여 스네이크 게임을 개발하는 방법에 대해 이야기해보겠습니다!

uni-app vue3 인터페이스 요청을 캡슐화하는 방법 uni-app vue3 인터페이스 요청을 캡슐화하는 방법 May 11, 2023 pm 07:28 PM

uni-app vue3 인터페이스 요청을 캡슐화하는 방법

uniapp이 다중 선택 상자의 전체 선택 기능을 구현하는 방법을 설명하는 예 uniapp이 다중 선택 상자의 전체 선택 기능을 구현하는 방법을 설명하는 예 Jun 22, 2022 am 11:57 AM

uniapp이 다중 선택 상자의 전체 선택 기능을 구현하는 방법을 설명하는 예

uni-app 캘린더 플러그인을 개발하고 게시하는 방법을 단계별로 안내합니다. uni-app 캘린더 플러그인을 개발하고 게시하는 방법을 단계별로 안내합니다. Jun 30, 2022 pm 08:13 PM

uni-app 캘린더 플러그인을 개발하고 게시하는 방법을 단계별로 안내합니다.

uniapp이 전화 녹음 기능을 구현하는 방법에 대한 자세한 예(코드 포함) uniapp이 전화 녹음 기능을 구현하는 방법에 대한 자세한 예(코드 포함) Jan 05, 2023 pm 04:41 PM

uniapp이 전화 녹음 기능을 구현하는 방법에 대한 자세한 예(코드 포함)

Uniapp을 사용하여 글로벌 메시지 프롬프트와 해당 구성요소를 구현하는 방법에 대해 이야기해 보겠습니다. Uniapp을 사용하여 글로벌 메시지 프롬프트와 해당 구성요소를 구현하는 방법에 대해 이야기해 보겠습니다. Jun 22, 2022 pm 06:24 PM

Uniapp을 사용하여 글로벌 메시지 프롬프트와 해당 구성요소를 구현하는 방법에 대해 이야기해 보겠습니다.

See all articles