快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)圖片上傳功能的思路與源碼

更新時(shí)間：2022年11月12日 15:22:32 作者：水星記_

我們?nèi)粘ｉ_(kāi)發(fā)中經(jīng)常需要用到圖片上傳功能,這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)圖片上傳功能的思路與源碼的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

手機(jī)上傳圖片的功能大家一定都用過(guò)吧，今天教你用微信小程序?qū)崿F(xiàn)這個(gè)小功能。

實(shí)現(xiàn)效果如下：

實(shí)現(xiàn)思路：

首先我們需要定義一個(gè)存放圖片的數(shù)組，通過(guò)方法拿取圖片的詳細(xì)信息，然后調(diào)用微信小程序的 wx.uploadFile 方法將拿到的圖片信息添加到定義好的圖片數(shù)組中即可；刪除圖片我們只需要拿到存放圖片的數(shù)組再通過(guò)splice方法刪除。

wx.uploadFile(Object object)方法的參數(shù)：

屬性	類型	必填項(xiàng)	說(shuō)明
url	string	是	開(kāi)發(fā)者服務(wù)器地址
filePath	string	是	要上傳文件資源的路徑 (本地路徑)
name	string	是	文件對(duì)應(yīng)的 key，開(kāi)發(fā)者在服務(wù)端可以通過(guò)這個(gè) key 獲取文件的二進(jìn)制內(nèi)容
header	Object	否	HTTP 請(qǐng)求 Header，Header 中不能設(shè)置 Referer
formData	Object	否	HTTP 請(qǐng)求中其他額外的 form data
timeout	function	否	超時(shí)時(shí)間，單位為毫秒
success	function	否	接口調(diào)用成功的回調(diào)函數(shù)
fail	function	否	接口調(diào)用失敗的回調(diào)函數(shù)
complete	function	否	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）

源碼文件

wxml文件

<view class="imgBox">
    <view><text>車輛照片</text></view>
    <view class="imgContant">
        <van-uploader accept="image" max-count="1" bind:after-read="afterRead" bind:delete="deleteClick" file-list="{{ fileList }}" />
    </view>
</view>

js文件

//獲取應(yīng)用實(shí)例
var app = getApp();
Page({
    data: {
        fileList: [], //圖片存放的數(shù)組
    },
    // 刪除照片
    deleteClick(event) {
        var imgData = this.data.fileList;
        // 通過(guò)splice方法刪除圖片
        imgData.splice(event.detail.index, 1);
        // 更新圖片數(shù)組
        this.setData({
            fileList: imgData
        })
    },
    // 車輛照片
    afterRead(event) {
        // loading加載
        wx.showLoading({
            title: '上傳中...'
        });
        const {file} = event.detail;//獲取圖片詳細(xì)信息
        let that = this;//防止this指向問(wèn)題
        // 設(shè)置請(qǐng)求頭，根據(jù)項(xiàng)目需求變換
        let Authorization = wx.getStorageSync('key')
        let headers = {
            'content-type': '',
            'client_id': 'webApp',
            'client_secret': '123456',
        }
        if (Authorization) {
            headers.Authorization = 'Bearer ' + Authorization
        }
        // 調(diào)用wx.uploadFile上傳圖片方法
        wx.uploadFile({
            url: "http://192.168.0.11:8888/api-xian/api-zjmj/zjmj/hmcl/uploadFile",
            method: 'POST',
            header: headers,
            filePath: file.url,
            name: 'file',
            formData: {
                user: 'test'
            },
            // 成功回調(diào)
            success(res) {
                // JSON.parse()方法是將JSON格式字符串轉(zhuǎn)換為js對(duì)象
                var result = JSON.parse(res.data);
                // 上傳完成需要更新 fileList
                const {fileList = []} = that.data;
                // 將圖片信息添加到fileList數(shù)字中
                fileList.push({
                    ...file,
                    url: result.data
                });
                // 更新存放圖片的數(shù)組
                that.setData({
                    fileList
                });
                wx.hideLoading();//停止loading
            },
        });
    },
})

wxss文件

page {
    background: #EFF4FF;
}

.imgBox {
    font-size: 28rpx;
    margin: 3%;
    background: white;
    padding: 30rpx;
    border-radius: 30rpx;
    display: flex;
    align-items: center;
}

.imgContant {
    margin-left: 40rpx;
}

至此，這個(gè)小功能就實(shí)現(xiàn)啦！