微信小程序?qū)崿F(xiàn)多文件或者圖片上傳
更新時(shí)間:2022年07月07日 11:06:39 作者:In Heaven
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)多文件或者圖片上傳,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)多文件或者圖片上傳的具體代碼,供大家參考,具體內(nèi)容如下
html
<view class="list1"> ? ? <view class="fonts">上傳事件相關(guān)資料或文件(jpg/pdf/word)<text class="xuan">(選填)</text> </view> ?? ?<view class="cell"> ?? ??? ?<view class='jinList' wx:for="{{uploaderList}}" wx:key="index"> ?? ??? ??? ?<image class="close1" bindtap="close" data-index="{{index}}" src="../../images/close1.png"></image> ? ? ? ? <image class="jinListImg" wx:if="{{type != 'file'}}" bindtap='showImg' data-index="{{index}}" src='{{item}}'></image> ?? ??? ??? ?<image class="jinListImg" src="../../images/img.png" wx:if="{{type == 'file'}}" mode="aspectFill"></image> ? ? </view> ? ? <view class="jia jia1" bindtap="upImg"> ?? ??? ??? ?<image src="../../images/jia.png" ?wx:if="{{isHidden}}"></image> ?? ??? ?</view> ?? ?</view> </view>
js
data: { ? ? isHidden: true,//原始添加 ? ? url: [],//上傳文件路徑 ? ? type: '',//上傳文件類型 ? ? uploaderList: [],//上傳文件數(shù)組 ? ? showModal: false, ? }, // // 上傳圖片 ? upImg() { ? ? var that = this ? ? wx.chooseMessageFile({ ? ? ? count: 1, ? ? ? type: 'all', ? ? ? success(res) { ? ? ? ? // tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片 ? ? ? ? // ?console.log('vvvvvvvv',res.tempFiles) ? ? ? ? const tempFilePaths = res.tempFiles[0].path ? ? ? ? const type = res.tempFiles[0].type ? ? ? ? wx.uploadFile({ ? ? ? ? ? url: app.globalData.urlSrc + '/api/chuan/index', ? ? ? ? ? filePath: tempFilePaths, ? ? ? ? ? name: 'file', ? ? ? ? ? success(res) { ? ? ? ? ? ? const datas = JSON.parse(res.data) ? ? ? ? ? ? console.log('上傳文件', datas) ? ? ? ? ? ? var status = datas.status ? ? ? ? ? ? that.data.list ? ? ? ? ? ? if (status == 1) { ? ? ? ? ? ? ? var upFiles = datas.data ? ? ? ? ? ? ? if (upFiles != '') { ? ? ? ? ? ? ? ? let tempFile = tempFilePaths; ? ? ? ? ? ? ? ? let uploaderList = that.data.uploaderList.concat(tempFile);//返回頁面的圖片數(shù)據(jù) ? ? ? ? ? ? ? ? that.data.url = that.data.url.concat(upFiles);//傳給后臺(tái)的圖片數(shù)據(jù) ? ? ? ? ? ? ? ? that.setData({ ? ? ? ? ? ? ? ? ? type: type, ? ? ? ? ? ? ? ? ? uploaderList: uploaderList ? ? ? ? ? ? ? ? }) ? ? ? ? ? ? ? } ? ? ? ? ? ? } ? ? ? ? ? } ? ? ? ? }) ? ? ? } ? ? }) ? }, ? // 刪除上傳 ? close(e) { ? ? var that = this ? ? var nowList = [];//新數(shù)據(jù) ? ? var uploaderList = that.data.uploaderList;//原數(shù)據(jù) ? ? for (let i = 0; i < uploaderList.length; i++) { ? ? ? if (i == e.currentTarget.dataset.index) { ? ? ? ? continue; ? ? ? } else { ? ? ? ? nowList.push(uploaderList[i]) ? ? ? } ? ? } ? ? that.setData({ ? ? ? uploaderList: nowList, ? ? ? isHidden: true ? ? }) ? },
css
.list1 { ? width: 670rpx; ? margin: 0 auto; } .tops { ? display: flex; ? margin-bottom: 22rpx; } .left1 { ? margin-left: 12rpx; ? line-height: 44rpx; ? text-align: left; } .listImg1 { ? width: 44rpx; ? height: 44rpx; ? margin-left: 24rpx; } .textarea1 { ? width: 670rpx; ? height: 250rpx; ? line-height: 40rpx; ? border-radius: 44rpx; ? background-color: rgba(255, 255, 255, 1); ? color: rgba(16, 16, 16, 1); ? font-size: 14px; ? text-align: left; ? border: 1px solid rgba(240, 240, 240, 1); ? margin:0 auto; ? padding: 20rpx 40rpx; ? box-sizing: border-box; ? margin-bottom: 40rpx; } .jia{ ? width: 140rpx; ? height: 140rpx; ? margin-top: 40rpx; } .jia image{ ? width: 140rpx; ? height: 140rpx; } .cell { ? width: 100%; ? overflow: hidden; } .jinListImg { ? width: 140rpx; ? height: 140rpx; ? border-radius: 24rpx; } .close1 { ? width: 40rpx; ? height: 40rpx; ? position: absolute; ? margin-left: 100rpx; } .jia1 { ? float: left; ? position: relative; }
示例圖
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 微信小程序?qū)崿F(xiàn)上傳照片代碼實(shí)例解析
- uni-app開發(fā)微信小程序之H5壓縮上傳圖片的問題詳解
- 微信小程序?qū)崿F(xiàn)云開發(fā)上傳文件、圖片功能
- 微信小程序?qū)崿F(xiàn)上傳圖片
- 微信小程序圖片上傳組件實(shí)現(xiàn)圖片拖拽排序
- 微信小程序?qū)崿F(xiàn)上傳圖片的功能
- 微信小程序?qū)崿F(xiàn)上傳多張圖片、刪除圖片
- 微信小程序?qū)崿F(xiàn)同時(shí)上傳多張圖片
- 微信小程序?qū)崿F(xiàn)一張或多張圖片上傳(云開發(fā))
- 微信小程序?qū)崿F(xiàn)文件、圖片上傳功能
- 微信小程序?qū)崿F(xiàn)多張照片上傳功能
相關(guān)文章
JS實(shí)現(xiàn)帶關(guān)閉功能的阿里媽媽網(wǎng)站頂部滑出banner工具條代碼
這篇文章主要介紹了JS實(shí)現(xiàn)帶關(guān)閉功能的阿里媽媽網(wǎng)站頂部滑出banner工具條代碼,可實(shí)現(xiàn)頂部banner窗口的浮動(dòng)顯示及關(guān)閉隱藏功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09layui實(shí)現(xiàn)數(shù)據(jù)分頁功能(ajax異步)
這篇文章主要為大家詳細(xì)介紹了layui實(shí)現(xiàn)數(shù)據(jù)分頁功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07JavaScript兼容性總結(jié)之獲取非行間樣式案例
這篇文章主要介紹了JavaScript兼容性總結(jié)之獲取非行間樣式的相關(guān)資料,需要的朋友可以參考下2016-08-08Bootstrap.css與layDate日期選擇樣式起沖突的解決辦法
這篇文章主要為大家詳細(xì)介紹了BootStrap.css與layDate日期選擇樣式起沖突的解決辦法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04