微信小程序?qū)崿F(xiàn)上傳圖片小功能

更新時(shí)間：2022年08月28日 11:55:46 作者：花笙_

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)上傳圖片小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(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>

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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: