参数 path 选择成功后返回 远程图片路径复制代码
参数 path_arr 选择图片成功后 返回远程图片路径数组复制代码
더 많은 고퀄리티 글을 보시려면 " >参数 num 为要选择的图片数量 返回 图片缓存路径 数组复制代码
로그인 후 복사더 많은 고퀄리티 글을 보시려면
参数 num 为要选择的图片数量 返回 图片缓存路径 数组复制代码
uni-app 기반 이미지 업로드 JS 플러그인 구현
관련 학습 권장사항: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

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

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

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

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

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

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

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

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

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

뜨거운 주제











VSCode에서 uni-app을 개발하는 방법은 무엇입니까? 다음 기사에서는 VSCode에서 uni-app을 개발하는 방법에 대한 튜토리얼을 공유할 것입니다. 이것은 아마도 가장 훌륭하고 자세한 튜토리얼일 것입니다. 와서 살펴보세요!

uniapp을 사용하여 간단한 지도 탐색을 개발하는 방법은 무엇입니까? 이 기사는 간단한 지도를 만드는 데 도움이 되기를 바랍니다.

uniapp을 사용하여 스네이크 게임을 개발하는 방법은 무엇입니까? 다음 기사는 uniapp에서 Snake 게임을 구현하는 방법을 단계별로 설명합니다. 도움이 되기를 바랍니다.

uni-app 인터페이스, 전역 메서드 캡슐화 1. 루트 디렉터리에 api 파일을 생성하고 api 폴더에 api.js, baseUrl.js 및 http.js 파일을 생성합니다. 2.baseUrl.js 파일 코드 importdefault"https://XXXX .test03.qcw800.com/api/"3.http.js 파일 코드 내보내기 기능https(opts,data){lethttpDefaultOpts={url:opts.url,data:data,method:opts.method

이번 글에서는 다중 선택박스의 전체 선택 기능 구현과 관련된 이슈를 주로 정리한 uniapp 관련 지식을 소개합니다. 전체 선택 기능을 구현할 수 없는 이유는 체크박스의 체크된 필드가 동적으로 수정하면 인터페이스의 상태가 실시간으로 변경될 수 있지만 checkbox-group의 변경 이벤트는 트리거될 수 없습니다. 모두에게 도움이 되기를 바랍니다.

이 글은 유니앱 캘린더 플러그인 개발 과정을 단계별로 안내하고, 다음 캘린더 플러그인 개발부터 출시까지 어떻게 진행되는지 소개하는 글이 여러분께 도움이 되길 바랍니다!

uniapp은 스크롤 보기 드롭다운 로딩을 어떻게 구현합니까? 다음 기사에서는 uniapp WeChat 애플릿 스크롤 보기의 드롭다운 로딩에 대해 설명합니다. 모든 사람에게 도움이 되기를 바랍니다.

이 기사는 uniapp에 대한 관련 지식을 제공합니다. 주로 uniapp을 사용하여 전화를 걸고 녹음을 동기화하는 방법을 소개합니다. 관심 있는 친구들이 꼭 읽어보시기 바랍니다.
