快捷導航

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

更新時間：2025年10月11日 08:53:58 作者：jingling1007

UniApp是一個跨平臺的前端框架,它允許開發(fā)者使用一套代碼構(gòu)建同時運行在微信小程序、H5、iOS、Android等多個平臺的應(yīng)用,在UniApp中,上傳圖片通常涉及到使用其提供的File?API或者第三方插件來進行操作,所以本文給大家介紹了Uniapp圖片上傳的兩種實現(xiàn)方式

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

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

photo-box容器用于展示圖片上傳區(qū)域
photo-item循環(huán)渲染已上傳的圖片，支持預覽和刪除功能
upload-section作為上傳入口，當圖片數(shù)量少于9張時顯示

<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">點擊上傳</text>
                </view>
            </view>
        </view>

2. 圖片展示邏輯

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

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

圖片上傳功能：

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

const uploadCoverImage = () => {
    uni.chooseMedia({
        count: 9 - coverImageList.value.length, // 限制最多9張
        mediaType: ['image'],
        sizeType: ['original'],
        sourceType: ['album', 'camera'],
        success: async (res) => {
            // 逐個上傳圖片
            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' })
        }
    })
}

圖片刪除功能：

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

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

圖片預覽功能

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

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

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

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

點擊圖片后預覽效果：

方法二（組件）：

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

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

使用 u-upload 組件實現(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="點擊上傳"
                            @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，不顯示組件默認提示信息
upload-text: 設(shè)置上傳按鈕顯示文本為"點擊上傳"

3. 事件處理機制

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

4. 事件處理邏輯

上傳成功處理:

當圖片上傳成功時觸發(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)
    }
}

刪除圖片處理:

當用戶刪除圖片時觸發(fā)
從 WeightImageList 數(shù)組中移除指定索引的圖片

const handleRemove = (index: any, lists: any, name: any) => {
    console.log('handleRemove---->', index, lists, name)
    WeightImageList.value.splice(index, 1)
}

預覽圖片處理:

當用戶點擊預覽圖片時觸發(fā)
當前僅輸出日志，可擴展實現(xiàn)圖片預覽功能

const handlePreview = (url: any, lists: any, index: any) => {
    console.log('handlePreview---->', url, lists, index)
}

5.實現(xiàn)效果

點擊預覽圖片效果：

傳統(tǒng)VS組件

使用 u-upload 組件：

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

不使用組件：

需要手動實現(xiàn)所有上傳邏輯和UI交互
需要自行處理文件選擇、上傳進度、錯誤處理等
開發(fā)周期長，代碼量大

寫在最后：

推薦使用u-upload組件，不僅僅是因為開發(fā)快速，還因為傳統(tǒng)方法實現(xiàn)上傳圖片，會有一個等待上傳的返回時間，并且還要push到對應(yīng)的lists里面來展示，這其中會有一個一兩秒的等待時長，給用戶體驗感不好，而組件則不會有這個一兩秒的延遲展示

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

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线