欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Uniapp圖片上傳的兩種實(shí)現(xiàn)方式詳解

 更新時(shí)間：2025年10月11日 08:53:58   作者：jingling1007  
UniApp是一個(gè)跨平臺(tái)的前端框架,它允許開(kāi)發(fā)者使用一套代碼構(gòu)建同時(shí)運(yùn)行在微信小程序、H5、iOS、Android等多個(gè)平臺(tái)的應(yīng)用,在UniApp中,上傳圖片通常涉及到使用其提供的File?API或者第三方插件來(lái)進(jìn)行操作,所以本文給大家介紹了Uniapp圖片上傳的兩種實(shí)現(xiàn)方式

方法一（傳統(tǒng)）：

1. UI結(jié)構(gòu)設(shè)計(jì)

  • photo-box容器用于展示圖片上傳區(qū)域
  • photo-item循環(huán)渲染已上傳的圖片，支持預(yù)覽和刪除功能
  • upload-section作為上傳入口，當(dāng)圖片數(shù)量少于9張時(shí)顯示
<view class="photo-box">
            <view class="photo-item" v-for="(item, index) in coverImageList" :key="index">
                <image
                    :src="item"
                    mode="aspectFill"
                    class="photo-item-image"
                    @click="previewImage(index)"
                ></image>
                <view class="delete-btn" @click.stop="deleteCoverImage(index)">
                    <text class="delete-icon">×</text>
                </view>
            </view>
            <view class="upload-section" @click="uploadCoverImage" v-if="coverImageList.length < 9">
                <view class="upload-placeholder-small">
                    <text class="upload-icon">+</text>
                    <text class="upload-text">點(diǎn)擊上傳</text>
                </view>
            </view>
        </view>

2. 圖片展示邏輯

  • 使用 v-for 遍歷 coverImageList 數(shù)組展示已上傳圖片
  • 每張圖片綁定點(diǎn)擊事件 previewImage(index) 實(shí)現(xiàn)預(yù)覽功能
  • 右上角刪除按鈕綁定 deleteCoverImage(index) 方法，支持刪除指定圖片

3. 核心功能實(shí)現(xiàn)

圖片上傳功能：

使用 uni.chooseMedia API 支持從相冊(cè)選擇或拍照，限制最多選擇9張圖片，并逐個(gè)上傳至服務(wù)器。

const uploadCoverImage = () => {
    uni.chooseMedia({
        count: 9 - coverImageList.value.length, // 限制最多9張
        mediaType: ['image'],
        sizeType: ['original'],
        sourceType: ['album', 'camera'],
        success: async (res) => {
            // 逐個(gè)上傳圖片
            for (let i = 0; i < res.tempFiles.length; i++) {
                const result: any = await uploadImage(res.tempFiles[i].tempFilePath)
                if (result) {
                    coverImageList.value.push(result.uri)
                } else {
                    uni.showToast({ title: '圖片上傳失敗', icon: 'none' })
                }
            }
            articleData.pic = coverImageList.value
        },
        fail: (err) => {
            console.error('選擇圖片失敗:', err)
            uni.showToast({ title: '選擇圖片失敗', icon: 'none' })
        }
    })
}

圖片刪除功能：

通過(guò)模態(tài)框確認(rèn)刪除操作，使用數(shù)組的 splice 方法移除指定索引的圖片，并同步更新表單數(shù)據(jù)。

const deleteCoverImage = (index: number) => {
    uni.showModal({
        title: '提示',
        content: '確定要?jiǎng)h除這張圖片嗎？',
        success: (res) => {
            if (res.confirm) {
                coverImageList.value.splice(index, 1)
                articleData.pic = coverImageList.value
            }
        }
    })
}

圖片預(yù)覽功能

通過(guò) uni.previewImage API 實(shí)現(xiàn)圖片全屏預(yù)覽，current 參數(shù)指定當(dāng)前查看的圖片索引

const previewImage = (index: number) => {
    if (coverImageList.value.length === 0) {
        uni.showToast({
            title: '暫無(wú)圖片',
            icon: 'none'
        })
        return
    }

    uni.previewImage({
        urls: coverImageList.value,
        current: index
    })
}

4.實(shí)現(xiàn)效果：

點(diǎn)擊圖片后預(yù)覽效果：

方法二（組件）：

使用uview里面的u-upload組件(https://vkuviewdoc.fsq.pub/components/upload.html)

1. 組件結(jié)構(gòu)

  • 使用 u-upload 組件實(shí)現(xiàn)圖片上傳功能
  • 包裝在 upload-section 容器內(nèi)，便于樣式控制
<view class="image-list-container">
                    <!-- 上傳 -->
                    <view class="upload-section">
                        <u-upload
                            :action="action"
                            max-count="9"
                            :show-tips="false"
                            upload-text="點(diǎn)擊上傳"
                            @on-success="handleUploaded"
                            @on-remove="handleRemove"
                            @on-preview="handlePreview"
                            :index="Imageindex"
                        ></u-upload>
                    </view>
 </view>

2. 核心配置參數(shù)

  • action: 指定上傳接口地址，綁定 action 響應(yīng)式變量
  • max-count: 限制最大上傳圖片數(shù)量為9張
  • show-tips: 設(shè)置為 false，不顯示組件默認(rèn)提示信息
  • upload-text: 設(shè)置上傳按鈕顯示文本為"點(diǎn)擊上傳"

3. 事件處理機(jī)制

  • @on-success: 圖片上傳成功時(shí)調(diào)用 handleUploaded 方法處理返回?cái)?shù)據(jù)
  • @on-remove: 用戶(hù)刪除圖片時(shí)調(diào)用 handleRemove 方法同步更新數(shù)據(jù)
  • @on-preview: 用戶(hù)點(diǎn)擊預(yù)覽圖片時(shí)調(diào)用 handlePreview 方法實(shí)現(xiàn)圖片預(yù)覽

4. 事件處理邏輯

上傳成功處理:

  • 當(dāng)圖片上傳成功時(shí)觸發(fā)
  • 將服務(wù)器返回的圖片URL data.data.uri 添加到 WeightImageList 數(shù)組中
const handleUploaded = (data: any, index: any, lists: any, name: any) => {
    console.log('handleUploaded---->', data, index, lists, name)
    if (data) {
        WeightImageList.value.push(data.data.uri)
    }
}

刪除圖片處理:

  • 當(dāng)用戶(hù)刪除圖片時(shí)觸發(fā)
  • 從 WeightImageList 數(shù)組中移除指定索引的圖片
const handleRemove = (index: any, lists: any, name: any) => {
    console.log('handleRemove---->', index, lists, name)
    WeightImageList.value.splice(index, 1)
}

預(yù)覽圖片處理:

  • 當(dāng)用戶(hù)點(diǎn)擊預(yù)覽圖片時(shí)觸發(fā)
  • 當(dāng)前僅輸出日志，可擴(kuò)展實(shí)現(xiàn)圖片預(yù)覽功能
const handlePreview = (url: any, lists: any, index: any) => {
    console.log('handlePreview---->', url, lists, index)
}

5.實(shí)現(xiàn)效果

點(diǎn)擊預(yù)覽圖片效果：

傳統(tǒng)VS組件

使用 u-upload 組件：

  • 提供開(kāi)箱即用的上傳功能，減少開(kāi)發(fā)工作量
  • 內(nèi)置UI樣式和交互邏輯（上傳進(jìn)度、刪除、預(yù)覽等）
  • 通過(guò)簡(jiǎn)單配置即可實(shí)現(xiàn)復(fù)雜功能

不使用組件：

  • 需要手動(dòng)實(shí)現(xiàn)所有上傳邏輯和UI交互
  • 需要自行處理文件選擇、上傳進(jìn)度、錯(cuò)誤處理等
  • 開(kāi)發(fā)周期長(zhǎng)，代碼量大

寫(xiě)在最后：

推薦使用u-upload組件，不僅僅是因?yàn)殚_(kāi)發(fā)快速，還因?yàn)閭鹘y(tǒng)方法實(shí)現(xiàn)上傳圖片，會(huì)有一個(gè)等待上傳的返回時(shí)間，并且還要push到對(duì)應(yīng)的lists里面來(lái)展示，這其中會(huì)有一個(gè)一兩秒的等待時(shí)長(zhǎng)，給用戶(hù)體驗(yàn)感不好，而組件則不會(huì)有這個(gè)一兩秒的延遲展示

以上就是Uniapp圖片上傳的兩種實(shí)現(xiàn)方式詳解的詳細(xì)內(nèi)容，更多關(guān)于Uniapp實(shí)現(xiàn)圖片上傳的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論