How to upload binary pictures in uniapp

uniapp How to upload binary pictures

This article mainly introduces “uniapp How to upload binary pictures ” Knowledge about , Xiaobian shows you the operation process through practical cases , The operation method is simple and fast , Practical , Hope this article “uniapp How to upload binary pictures ” The article can help you solve problems .

functional requirement ：

The front end selects the local file , Display the selected file on the interface for preview , You can select four at the same time for preview .

Ideas as follows ：

The front end selects local png、jpg、 Wait for the format of the picture , Send the picture to the back end in binary form The server , The back end processes binary images , Return to the front-end a server link online picture , In the browser, you can open the link to access . Then the front end renders the image link on the page for preview .

First

Let's see uniapp Official documents of ：https://uniapp.dcloud.io/api/media/image?id=chooseimage

It looks something like this

First write a simulated demo

1： First I did colorUI Framework , Introduce... Into the project

stay page Under the vue The file import

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

thus , There is no need to write any style , Just use what you have written .

<template>    <view>        <form>            <view class="cu-bar bg-white margin-top">                <view class="action">                     Image upload                 </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, // Default 9                    sizeType: ['original', 'compressed'], // You can specify whether it is original or compressed , By default, both of them have                     sourceType: ['album'], // Select from the album                     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                });            },            // Delete             DelImg(e) {                uni.showModal({                    title: ' Delete ',                    content: ' Are you sure you want to delete this picture ？',                    cancelText: ' Cancel ',                    confirmText: ' Delete ',                    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>

The effect is this
Each time you select a picture, it will be displayed on the page , I have set up a maximum of four options here , Picture links use temporary blob, Next, you need to use the interface provided by the backend partner , I passed my local binary file to him .

stay chooseImage After selecting the picture , Write a successful callback function , Add an image uploading method in the return function uploadFile, Add... To the method url, Equal parameter .

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]                                     }                            });                        }

If the request is successful
Then return a picture link

After adding the interface Of ,demo as follows ：

<template>    <view>        <form>            <view class="cu-bar bg-white margin-top">                <view class="action">                     Image upload                 </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, // Default 9                    sizeType: ['original', 'compressed'], // You can specify whether it is original or compressed , By default, both of them have                     sourceType: ['album'], // Select from the album                     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                });            },            // Delete             DelImg(e) {                uni.showModal({                    title: ' Delete ',                    content: ' Are you sure you want to delete this picture ？',                    cancelText: ' Cancel ',                    confirmText: ' Delete ',                    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>

Upload picture effects

About “uniapp How to upload binary pictures ” That's all for , Thanks for reading . If you want to know more about the industry , You can pay attention to the Yisu cloud industry information channel , Xiaobian will update different knowledge points for you every day .