快捷導(dǎo)航

uniapp上傳二進(jìn)制圖片的實(shí)現(xiàn)

更新時(shí)間：2022年06月30日 11:16:31 作者：祈澈菇?jīng)?

本文主要介紹了uniapp上傳二進(jìn)制圖片的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

功能需求：

前端選擇本地文件，將選擇好的文件顯示在界面上進(jìn)行預(yù)覽，可同時(shí)選擇四張進(jìn)行預(yù)覽。

思路如下：

前端選擇本地的png、jpg、等格式的圖片，將圖片以二進(jìn)制的形式傳到后端服務(wù)器，后端對(duì)二進(jìn)制圖片進(jìn)行處理，返回給前端一個(gè)服務(wù)器鏈接在線圖片，在瀏覽器就可以打開鏈接訪問的那種。然后前端將這個(gè)圖片鏈接渲染在頁面進(jìn)行預(yù)覽。

首先

我們看一下uniapp的官方文檔：https://uniapp.dcloud.io/api/media/image?id=chooseimage

大概是這樣的

先寫一個(gè)模擬的demo

1：首先我是是用了colorUI的框架，在項(xiàng)目里面引入

在page底下的vue文件引入

@import "../../colorui/main.css";
@import "../../colorui/icon.css";

這樣一來，就不需要寫什么樣式了，直接使用寫好的就行了。

<template>
    <view>
        <form>
            <view class="cu-bar bg-white margin-top">
                <view class="action">
                    圖片上傳
                </view>
                <view class="action">
                    {{imgList.length}}/4
                </view>
            </view>
            <view class="cu-form-group">
                <view class="grid col-4 grid-square flex-sub">
                    <view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
                     <image :src="imgList[index]" mode="aspectFill"></image>
                        <view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
                            <text class='cuIcon-close'></text>
                        </view>
                    </view>
                    <view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
                        <text class='cuIcon-cameraadd'></text>
                    </view>
                </view>
            </view>
            
        </form>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                imgList: [],
            //  modalName: null,
            };
        },
        methods: {
        
            ChooseImage() {
                uni.chooseImage({
                    count: 4, //默認(rèn)9
                    sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖，默認(rèn)二者都有
                    sourceType: ['album'], //從相冊(cè)選擇
                    success: (res) => {
                        if (this.imgList.length != 0) {
                            this.imgList = this.imgList.concat(res.tempFilePaths)
                        } else {
                            this.imgList = res.tempFilePaths
                        }
                    }
                });
            },
            ViewImage(e) {
                uni.previewImage({
                    urls: this.imgList,
                    current: e.currentTarget.dataset.url
                });
            },
            //刪除
            DelImg(e) {
                uni.showModal({
                    title: '刪除',
                    content: '確定要?jiǎng)h除這張圖片？',
                    cancelText: '取消',
                    confirmText: '刪除',
                    success: res => {
                        if (res.confirm) {
                            this.imgList.splice(e.currentTarget.dataset.index, 1)
                        }
                    }
                })
            },
        }
    }
</script>
 
<style>
@import "../../colorui/main.css";
@import "../../colorui/icon.css";
.cu-form-group .title {
   min-width: calc(4em + 15px);
}
</style>

效果是這樣的
每次選完圖片之后顯示在頁面上，我這里設(shè)置了最多可以選擇四張，圖片鏈接使用了臨時(shí)的blob，接下來就要使用后端小伙伴給的接口，將自己本地的二進(jìn)制文件傳給他了。

在chooseImage選擇好圖片之后，寫一個(gè)成功的回調(diào)函數(shù)，在回到函數(shù)里面添加一個(gè)圖片上傳的方法uploadFile，在方法里面添加url，等參數(shù)。

success: (res) => {
                            const tempFilePaths = res.tempFilePaths;
                            const uploadTask = uni.uploadFile({
                                url: 'http://47.xxx.xxx.78:8088/chemApp/work/upload.action',
                                filePath: tempFilePaths[0],
                                name: 'file',
                                success: function(uploadFileRes) {
                                    console.log(uploadFileRes);
                                    _this.imgList = [..._this.imgList, uploadFileRes.data]
     
                                }
                            });
                        }

若是請(qǐng)求成功
則返回一個(gè)圖片鏈接

添加接口之后的，demo如下：

<template>
    <view>
        <form>
            <view class="cu-bar bg-white margin-top">
                <view class="action">
                    圖片上傳
                </view>
                <view class="action">
                    {{imgList.length}}/4
                </view>
            </view>
            <view class="cu-form-group">
                <view class="grid col-4 grid-square flex-sub">
                    <view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="item">
                     <image v-if="item" :src="item" mode="aspectFill"></image>
                        <view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
                            <text class='cuIcon-close'></text>
                        </view>
                    </view>
                    <view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
                        <text class='cuIcon-cameraadd'></text>
                    </view>
                </view>
            </view>
            
        </form>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                imgList: [],
            //  modalName: null,
            };
        },
        methods: {
        
            ChooseImage() {
                const _this = this
                uni.chooseImage({
                    count: 4, //默認(rèn)9
                    sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖，默認(rèn)二者都有
                    sourceType: ['album'], //從相冊(cè)選擇
                    success: (res) => {
                         const tempFilePaths = res.tempFilePaths;
                             const uploadTask = uni.uploadFile({
                              url : 'http://47.xxx.xxx.78:8088/chemApp/work/upload.action',
                              filePath: tempFilePaths[0],
                              name: 'file',
                             
                              success: function (uploadFileRes) {
                               console.log(uploadFileRes);
                               _this.imgList = [..._this.imgList, uploadFileRes.data]
                               
                              }
                             });
                       
                    }
                });
            },
            ViewImage(e) {
                uni.previewImage({
                    urls: this.imgList,
                    current: e.currentTarget.dataset.url
                });
            },
            //刪除
            DelImg(e) {
                uni.showModal({
                    title: '刪除',
                    content: '確定要?jiǎng)h除這張圖片？',
                    cancelText: '取消',
                    confirmText: '刪除',
                    success: res => {
                        if (res.confirm) {
                            this.imgList.splice(e.currentTarget.dataset.index, 1)
                        }
                    }
                })
            },
        }
    }
</script>
 
<style>
@import "../../colorui/main.css";
@import "../../colorui/icon.css";
.cu-form-group .title {
   min-width: calc(4em + 15px);
}
</style>