H5图片上传压缩---uniapp

最新推荐文章于 2024-07-05 16:23:37 发布

孤叶-xz

最新推荐文章于 2024-07-05 16:23:37 发布

阅读量890

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/qq_39907410/article/details/106235085

版权

本文介绍如何在uniapp的H5环境中进行图片上传并进行压缩操作，提供了一段直接上手的代码示例，适用于前端开发者。

摘要由CSDN通过智能技术生成

H5图片上传压缩---uniapp

1.直接上代码

1.直接上代码

<template>
    <view class="content">
        <button type="default" @click="onSinngle">单张压缩</button>
        <image class="image" :src="single" mode="aspectFill"></image>

        <button type="default" @click="onMulti">多张压缩</button>
        <block v-for="(item, idx) in multi" :key="idx">
            <image class="image" :src="item" mode="aspectFill"></image>
        </block>

        <w-compress ref='wCompress' />
    </view>
</template>


import WCompress from '@/components/w-compress/w-compress.vue'
export default {
    components: {
        WCompress
    },
    data() {
        return {
            multi: [],
            single: ''