.upload_box{.upload{width:120rpx;楂樺害锛?20rpx锛涜竟妗嗭細2rpx瀹炲績#d9d9d9锛涘瓧浣撳ぇ灏忥細24rpx锛涢鑹诧細#999999锛涙樉绀猴細寮规€э紱璇佹槑鍐呭锛氬眳涓紱寮规€ф柟鍚戯細鍒楋紱瀵归綈椤圭洰锛氬眳涓紱淇濊瘉閲戝簳閮細20rpx锛?iconfont{杈硅窛搴曢儴锛?rpx锛泒}.image_list{鏄剧ず锛歠lex锛涘脊鎬у寘瑁咃細鍖呰锛?image_item{浣嶇疆瀹藉害锛?20rpx锛涢珮搴︼細120rpx锛涗繚璇侀噾锛?20rpx20rpx0锛泎-绱㈠紩锛?锛涘浘鐗噞瀹藉害锛?20rpx锛涢珮搴︼細120rpx锛泒.iconfont{棰滆壊锛?ff0000;瀛椾綋澶у皬锛?0rpx锛涗綅缃細缁濆锛泎-鎸囨暟锛?0锛涘彸锛?锛涢《閮細0锛泒}}}.upload_tip{棰滆壊锛?999999锛涘瓧浣撳ぇ灏忥細24rpx锛沵argin-top:-10rpx;}Demo锛歶ni-app妯℃澘GitHub鍦板潃Tips2020/12/07鏀粯瀹濈◢鍚庡彲鐢ㄥ皬绋嬪簭涓氬姟锛岃缁勪欢鍏煎~~~浜叉祴鏈夋晥闂闇€姹備腑锛岄渶瑕佷笂浼犲寮犲浘鐗囷紝浣嗘槸寰俊灏忕▼搴忓彧鑳戒笂浼犲崟寮犲浘鐗囷紝澶氬浘涓婁紶鍙敮鎸佸簲鐢ㄧ▼搴忓拰H5銆傚鏋滃彧鑳戒竴寮犱竴寮犱笂浼犲浘鐗囷紝鐢ㄦ埛浣撻獙鏄浉褰撶碂绯曠殑銆傜浉淇′笂浼犵殑鐢ㄦ埛浼氬彂鐤殑銆傘€傘€傛€濊矾鍦ㄥ畼鏂规枃妗ｄ腑涔熺粰鍑轰簡瑙ｅ喅鏂规硶锛屽氨鏄弽澶嶈皟鐢╝piuni.uploadFile瑙ｅ喅鏂规硶銆傛垜鐢ㄧ殑鏄痷ni-app鎻掍欢甯傚満鐨刲uck-request鎻掍欢锛堜豢axios灏佽request缃戠粶璇锋眰搴擄紝鏀寔鎷︽埅鍣ㄥ拰浠诲姟鎿嶄綔锛変篃鏈塽ni.uploadFile銆傝繖閲岋紝鎴戝湪api.js鏂囦欢涓畾涔変簡涓婁紶鍥剧墖鐨勬柟娉曘€?/涓婁紶鍥剧墖锛屾帴鍙ｅ悕鏍规嵁鑷繁鐨勫悗鍙板畾涔夛紝杩欎釜鎺ュ彛涓嶈兘璋冪敤exportconstuploadToOss=(params)=>axios.upload('/api/upload/xxx',{...params,custom:{loading:true,loadingTitle:'Uploading...'}})UploadPic.vue{{btnText}}{{tip}}<鑴氭湰>杩涘彛{uploadToOss}from'@/api/http';exportdefault{props:{//鎻愮ず淇℃伅tip:{type:String,default:''},//鎸夐挳鏂囧瓧btnText:{type:String,default:''},//鏈€澶у浘鐗囨暟閲忛檺鍒讹紝榛樿1寮爈imit:{type:Number,default:1},//鍥剧墖绫诲瀷锛岀敤浜庡尯鍒嗗悓涓€椤甸潰澶氫釜鍥剧墖涓婁紶缁勪欢imgType:{type:String,default:'image'}},data(){return{files:[]//鍥剧墖涓婁紶鍚庣殑鍥剧墖鍦板潃闆嗗悎};},methods:{/***@descriptiondeleteimage*@param{Number}index鍥剧墖鐨勭储寮曞€?/removeItem(index){this.files.splice(index,1);杩欎釜.sendMessage();//鍙戦€佹秷鎭埗缁勪欢},/***@descriptionuploadimage*@param{String}url鍥剧墖涓存椂鍦板潃*/uploadImg(url){returnnewPromise((resolve,reject)=>{uploadToOss({filePath:url,fileType:'image',name:'file',}).then(res=>{if(res._OK){resolve(res.data.data);}else{uni.showModal({鏍囬:'Prompt',content:res.data.message||'涓婁紶澶辫触'})returnnewPromise.reject(res);}}).catch(err=>{returnnewPromise.reject(err);})})},/***@description閬嶅巻璋冪敤涓婁紶鎺ュ彛*@param{Array}tempFilePathsuni.chooseImage閫夋嫨鍥剧墖鍚庤繑鍥炰复鏃跺浘鐗囧湴鍧€闆嗗悎*@returns{Array}arr寮傛璋冪敤涓婁紶鎺ュ彛鍦ㄦ湇鍔″櫒鍦板潃闆嗗悎涓婅繑鍥炲浘鐗囨湇鍔″櫒*/asyncuploads(tempFilePaths){letarr=[];瀵逛簬锛堣鎴?0锛涙垜.upload_box{.upload{width:120rpx;楂樺害锛?20rpx锛涜竟妗嗭細2rpx瀹炲績#d9d9d9锛涘瓧浣撳ぇ灏忥細24rpx锛涢鑹诧細#999999锛涙樉绀猴細寮规€э紱璇佹槑鍐呭锛氬眳涓紱寮规€ф柟鍚戯細鍒楋紱瀵归綈椤圭洰锛氬眳涓紱淇濊瘉閲戝簳閮細20rpx锛?iconfont{杈硅窛搴曢儴锛?rpx锛泒}.image_list{鏄剧ず锛歠lex锛涘脊鎬у寘瑁咃細鍖呰锛?image_item{浣嶇疆瀹藉害锛?20rpx锛涢珮搴︼細120rpx锛涗繚璇侀噾锛?20rpx20rpx0锛泎-绱㈠紩锛?锛涘浘鐗噞瀹藉害锛?20rpx锛涢珮搴︼細120rpx锛泒.iconfont{棰滆壊锛?ff0000;瀛椾綋澶у皬锛?0rpx锛涗綅缃細缁濆锛泎-鎸囨暟锛?0锛涘彸锛?锛涢《閮細0锛泒}}}.upload_tip{棰滆壊锛?999999锛涘瓧浣撳ぇ灏忥細24rpx锛沵argin-top:-10rpx;}鎬荤粨浜嗚繖涓鍥句笂浼犵粍浠剁殑浜や簰鎬у拰鎵╁睍鎬т笉澶熷ソ锛屼絾鍩烘湰婊¤冻褰撳墠浜у搧鐨勯渶姹傦紝浼氬湪涓寔缁凯浠ｆ洿鏂版湭鏉ワ紝鎴戝笇鏈涗綘鑳界粰鎴戜滑鏇村鐨勬剰瑙侌煒滒煒滒煒?/p>
