목차
" >
" >参数 path 选择成功后返回 远程图片路径复制代码
로그인 후 복사
参数 path_arr 选择图片成功后 返回远程图片路径数组复制代码
로그인 후 복사
더 많은 고퀄리티 글을 보시려면 " >参数 num 为要选择的图片数量 返回 图片缓存路径 数组复制代码
로그인 후 복사더 많은 고퀄리티 글을 보시려면
参数 num 为要选择的图片数量 返回 图片缓存路径 数组复制代码
로그인 후 복사
uni-app 기반 이미지 업로드 JS 플러그인 구현
uni-app
관련 학습 권장사항: javascript(동영상)
New before use
모든 메소드는 promise 객체를 반환하기 위해 then()을 사용하거나 async wait
를 사용할 수 있습니다.미리보기 해보자
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;复制代码
로그인 후 복사
사진 선택/* 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 사진 업로드参数 num 为要选择的图片数量 返回 图片缓存路径 数组复制代码
로그인 후 복사
参数 path 选择成功后返回 远程图片路径复制代码
로그인 후 복사
upload 여러 장 업로드参数 path 选择成功后返回 远程图片路径复制代码
로그인 후 복사
参数 path_arr 选择图片成功后 返回远程图片路径数组复制代码
로그인 후 복사
choose_and_upload 사진을 선택해 업로드参数 path_arr 选择图片成功后 返回远程图片路径数组复制代码
로그인 후 복사
参数 num 为要选择的图片数量 返回 图片缓存路径 数组复制代码
로그인 후 복사더 많은 고퀄리티 글을 보시려면
uni-app컬럼을 주목해주세요~
参数 num 为要选择的图片数量 返回 图片缓存路径 数组复制代码
로그인 후 복사
위 내용은 uni-app 기반 이미지 업로드 JS 플러그인 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

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

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

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

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

인기 기사
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
2 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
Repo : 팀원을 부활시키는 방법
4 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전
By DDD
R.E.P.O. 파일 저장 위치 : 어디에 있고 그것을 보호하는 방법은 무엇입니까?
3 몇 주 전
By DDD

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

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

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

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

뜨거운 주제
Gmail 이메일의 로그인 입구는 어디에 있나요?
7315
9


자바 튜토리얼
1625
14


Cakephp 튜토리얼
1348
46


라라벨 튜토리얼
1260
25


PHP 튜토리얼
1207
29



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

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

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

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

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

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