微信小程序?qū)崿F(xiàn)上傳圖片小功能
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)上傳圖片的具體代碼,供大家參考,具體內(nèi)容如下
用到的api
wx.chooseMedia(); 用于拍攝或從手機(jī)相冊(cè)中選擇圖片或視頻
功能:點(diǎn)擊上傳圖片,可多選,或者拍照上傳;點(diǎn)擊圖片放大查看;長(zhǎng)按圖片刪除
效果圖
json里面引用weui的組件uploader
{ ? "navigationBarTitleText": "評(píng)價(jià)工單", ? "usingComponents": { ? ? "mp-uploader": "weui-miniprogram/uploader/uploader", ? ? "mp-cells": "weui-miniprogram/cells/cells", ? ? "mp-cell": "weui-miniprogram/cell/cell" ? } }
wxml
<view class="weui-uploader"> ? ? ?<view class="img-v weui-uploader__bd"> ? ? ? ? <view class='pic' wx:for="{{technicianAssessPicture}}" wx:for-item="item" wx:key="*this"> ? ? ? ? ? ? <image class='weui-uploader__img ' src="{{item}}" data-index="{{index}}" mode="aspectFill" bindlongpress="deleteTechnician" bindtap="previewTechnician"> ? ? ? ? ? ? </image> ? ? ? ? </view> ? ? ? ? <view class="weui-uploader__input-box pic" bindtap="technicianImg"> </view> ? ? ?</view> </view>
js
data:(){ ?? ?technicianAssessPicture: [], // 技師圖片 } // 上傳技師圖片 ? technicianImg: function (e) { ? ? var that = this; ? ? var technicianAssessPicture = this.data.technicianAssessPicture; ? ? if (technicianAssessPicture.length >= 9) { ? ? ? this.setData({ ? ? ? ? lenMore: 1 ? ? ? }); ? ? ? setTimeout(function () { ? ? ? ? that.setData({ ? ? ? ? ? lenMore: 0 ? ? ? ? }); ? ? ? }, 2500); ? ? ? return false; ? ? } ? ? wx.chooseMedia({ ? ? ? count: 9, ? // 默認(rèn)9 ? ? ? mediaType: ['image','video'], ? // 文件類(lèi)型 ? ? ? // image?? ?只能拍攝圖片或從相冊(cè)選擇圖片?? ? ? ? ? // video?? ?只能拍攝視頻或從相冊(cè)選擇視頻 ? ? ?? ? ? ? // sizeType: ['original', 'compressed'], ?//所選的圖片的尺寸 ?original原圖,compressed壓縮圖 ? ? ? // 僅對(duì) mediaType 為 image 時(shí)有效,是否壓縮所選文件 ? ? ?? ? ? ? sourceType: ['album', 'camera'], ?//圖片和視頻選擇的來(lái)源 ? ? ? maxDuration: 30, ? // ?拍攝視頻最長(zhǎng)拍攝時(shí)間,單位秒。時(shí)間范圍為 3s 至 60s 之間。不限制相冊(cè)。 ? ? ? camera: 'back', ? ?// 僅在 sourceType 為 camera 時(shí)生效,使用前置或后置攝像頭 ? ? ? // ?back?? ?使用后置攝像頭;front?? ?使用前置攝像頭 ? ? ? success: function (res) { ? ? ? ? var tempFilePaths = res.tempFiles; ? ? ? ? var technicianAssessPicture = that.data.technicianAssessPicture; ? ? ? ? for (var i = 0; i < tempFilePaths.length; i++) { ? ? ? ? ? if (technicianAssessPicture.length >= 9) { ? ? ? ? ? ? that.setData({ ? ? ? ? ? ? ? technicianAssessPicture: technicianAssessPicture ? ? ? ? ? ? }); ? ? ? ? ? ? return false; ? ? ? ? ? } else { ? ? ? ? ? ? const tempFilePaths1 = tempFilePaths.map(v=>v.tempFilePath) ? ? ? ? ? ? // ? tempFilePaths數(shù)據(jù)是json數(shù)組,我們需要的是普通數(shù)組需要處理一下 ? ? ? ? ? ? technicianAssessPicture.push(tempFilePaths1[i]); ? ? ? ? ? } ? ? ? ? } ? ? ? ? that.setData({ ? ? ? ? ? technicianAssessPicture: technicianAssessPicture ? ? ? ? }); ? ? ? ? console.log(that.data.technicianAssessPicture, 'hhhhhhhhhhhhhhhhhhhhh'); ? ? ? } ? ? }); ? },
處理后打印出來(lái)的數(shù)據(jù)
預(yù)覽,刪除
// 預(yù)覽圖片 previewTechnician: function (e) { ? ? //獲取當(dāng)前圖片的下標(biāo) ? ? var index = e.currentTarget.dataset.index; ? ? //所有圖片 ? ? var technicianAssessPicture = this.data.technicianAssessPicture; ? ? wx.previewImage({ ? ? ? //當(dāng)前顯示圖片 ? ? ? current: technicianAssessPicture[index], ? ? ? //所有圖片 ? ? ? urls: technicianAssessPicture ? ? }) ? }, ? // 長(zhǎng)按刪除 ? deleteTechnician: function (e) { ? ? var that = this; ? ? var technicianAssessPicture = that.data.technicianAssessPicture; ? ? var index = e.currentTarget.dataset.index; ? ?// ? 獲取當(dāng)前長(zhǎng)按圖片下標(biāo) ? ? wx.showModal({ ? ? ? // cancelColor: 'cancelColor', ? ? ? title: '提示', ? ? ? content: '確定要?jiǎng)h除此圖片嗎?', ? ? ? success: function (res) { ? ? ? ? if (res.confirm) { ? ? ? ? ? console.log('確定'); ? ? ? ? ? technicianAssessPicture.splice(index, 1); ? ? ? ? } else if (res.cancel) { ? ? ? ? ? console.log('取消'); ? ? ? ? ? return false; ? ? ? ? } ? ? ? ? that.setData({ ? ? ? ? ? technicianAssessPicture ? ? ? ? }) ? ? ? } ? ? }) },
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript讀二進(jìn)制文件并用ajax傳輸二進(jìn)制流的方法
這篇文章主要介紹了JavaScript讀二進(jìn)制文件并用ajax傳輸二進(jìn)制流的方法的相關(guān)資料,需要的朋友可以參考下2016-07-07javascript之大字符串的連接的StringBuffer 類(lèi)
javascript之大字符串的連接的StringBuffer 類(lèi)...2007-05-05javascript獲取當(dāng)前的時(shí)間戳的方法匯總
這篇文章主要介紹了javascript獲取當(dāng)前的時(shí)間戳的方法匯總的相關(guān)資料,需要的朋友可以參考下2015-07-07JavaScript實(shí)現(xiàn)向setTimeout執(zhí)行代碼傳遞參數(shù)的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)向setTimeout執(zhí)行代碼傳遞參數(shù)的方法,分析了向setTimeout傳遞參數(shù)的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04js中使用DOM復(fù)制(克?。┲付ü?jié)點(diǎn)名數(shù)據(jù)到新的XML文件中的代碼
使用DOM復(fù)制(克?。┲付ü?jié)點(diǎn)名數(shù)據(jù)到新的XML文件中 ,用到三個(gè)類(lèi)的相關(guān)知識(shí)點(diǎn) : DOMDocument - DOMNodeList - DOMNode2011-07-07Javascript aop(面向切面編程)之a(chǎn)round(環(huán)繞)分析
這篇文章主要介紹了Javascript aop(面向切面編程)之a(chǎn)round(環(huán)繞) ,需要的朋友可以參考下2015-05-05OpenLayers3實(shí)現(xiàn)測(cè)量功能
這篇文章主要為大家詳細(xì)介紹了OpenLayers3實(shí)現(xiàn)測(cè)量功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09ECharts柱狀排名圖柱子上方顯示文字與圖標(biāo)代碼實(shí)例
我們?cè)诶L制柱狀圖時(shí)如果想要柱條上顯示文字,可以參考本文,這篇文章主要給大家介紹了關(guān)于ECharts柱狀排名圖柱子上方顯示文字與圖標(biāo)的相關(guān)資料,需要的朋友可以參考下2023-11-11