uniapp上传图片

最新推荐文章于 2024-11-07 10:38:40 发布
最新推荐文章于 2024-11-07 10:38:40 发布
阅读量290 收藏
点赞数
分类专栏： 前端开发学习笔记 文章标签： html javascript dreamweaver 前端 Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46121269/article/details/129615747
版权

插件 shmily-drag-image，插入components，自行修改插件图片地址

<template>
    <view class="con" style="position: inherit;">
        <movable-area class="area" :style="{ height: areaHeight }" @mouseenter="mouseenter" @mouseleave="mouseleave">


            <block v-for="(item, index) in imageList" :key="item.id">
                <movable-view class="view" :x="item.x" :y="item.y" direction="all" :damping="40"
                    :disabled="item.disable" @change="onChange($event, item)" @touchstart="touchstart(item)"
                    @mousedown="touchstart(item)" @touchend="touchend(item)" @mouseup="touchend(item)"
                    :style="{ width: viewWidth + 'px', height: viewWidth + 'px', 'z-index': item.zIndex, opacity: item.opacity }">
                    <view class="area-con"
                        :style="{ width: childWidth, height: childWidth, transform: 'scale(' + item.scale + ')' }">
                        <image class="pre-image" :src="$uniimg+item.src" mode="aspectFill"></image>
                        <view class="del-con" @click="delImage(item, index)" @touchstart.stop="delImageMp(item, index)"
                            @touchend.stop="nothing()" @mousedown.stop="nothing()" @mouseup.stop="nothing()">
                            <view class="del-wrap">
                                <image class="del-image"
                                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhCAYAAABX5MJvAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAhdEVYdENyZWF0aW9uIFRpbWUAMjAyMDowNzoyNSAyMTo1NDoyOU4TkJAAAADcSURBVFhH7ZfRCoMwDEXLvkjwwVf/bH/emmAyN6glTW9WBjsgwm28OeCLpj81Sil7zvlJ90UiONS/yY5VogsO6XrBg3IEQ5a/s8vRSWUAKmLqp2w5jz5BiNQEGMo3GbloDLtFXJ1IkaEuhAiiY6gEIqB4yqACSk9piIBiKQ8VUFpLviKg3C2rESKgWERCBZSWiEfgIfffYvrrsAgoISJ3Apy3zuTxcSxLQkV6ykNEPKVQkZEyiAiiZKgDIaC4upACSlcn5fM/+WuDCAHF1E/Z/N9AhkMZnPNDPI+UDjPIXgAQIGjNAAAAAElFTkSuQmCC">
                                </image>
                            </view>
                        </view>
                    </view>
                </movable-view>
            </block>


            <view class="add" v-if="imageList.length < number"
                :style="{ top: add.y, left: add.x, width: viewWidth + 'px', height: viewWidth + 'px' }"
                @click="addImages">
                <view class="add-wrap" :style="{ width: childWidth, height: childWidth }">
                    <image style="width: 100%;height: 100%;" src="../../static/upload.png"></image>
                </view>
            </view>
        </movable-area>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                imageList: [],
                width: 0,
                add: {
                    x: 0,
                    y: 0
                },
                colsValue: 0,
                viewWidth: 0,
                tempItem: null,
                timer: null,
                changeStatus: true,
                preStatus: true,
                showList: false
            }
        },
        props: {
            // 返回排序后图片
            list: {
                type: Array,
                default: function() {
                    return []
                }
            },

            // 选择图片数量限制
            number: {
                type: Number,
                default: 5
            },
            // 图片父容器宽度（实际显示的图片宽度为 imageWidth / 1.1 ），单位 rpx
            imageWidth: {
                type: Number,
                default: 230
            },
            // 图片列数（cols > 0 则 imageWidth 无效）
            cols: {
                type: Number,
                default: 4
            },
            // 图片周围空白填充，单位 rpx
            padding: {
                type: Number,
                default: 10
            },
            // 拖动图片时放大倍数 [0, ∞)
            scale: {
                type: Number,
                default: 1.1
            },
            // 拖动图片时不透明度
            opacity: {
                type: Number,
                default: 0.7
            },
            // 自定义添加（需配合 @aaddImage 事件使用）
            custom: {
                type: Boolean,
                default: false
            },
            isAsync: {
                type: Boolean,
                default: false
            },
            isClear: {
                type: Boolean,
                default: false
            },
            isPop: {
                type: Boolean,
                default: false
            },
        },
        watch: {
            isAsync(newVal, oldVal) {
                if (newVal == true) {
                    const query = uni.createSelectorQuery().in(this)
                    query.select('.area').boundingClientRect(data => {
                        this.colsValue = Math.floor(data.width / this.viewWidth)
                        if (this.cols > 0) {
                            this.colsValue = this.cols
                            this.viewWidth = data.width / this.cols
                        }

                        for (let item of this.list) {
                            this.addProperties(item)
                        }
                    })
                    query.exec()
                }
            },
            isClear(newVal, oldVal) {
                if (newVal == true) {

                    this.imageList = [];
                    this.add.x = 0;
                    this.add.y = 0;
                }
            }
        },

        computed: {
            areaHeight() {
                if (this.imageList.length < this.number) {

                    return Math.ceil((this.imageList.length + 1) / this.colsValue) * this.viewWidth + 'px'
                } else {
                    return Math.ceil(this.imageList.length / this.colsValue) * this.viewWidth + 'px'
                }
            },
            childWidth() {
                console.log(this.viewWidth)
                return this.viewWidth - this.rpx2px(this.padding) * 2 + 'px'
            },
        },
        created() {
            if (this.isPop) {
                this.width = 578;
                this.viewWidth = this.rpx2px(this.imageWidth);
            } else {
                this.width = uni.getSystemInfoSync().windowWidth;
                this.viewWidth = this.rpx2px(this.imageWidth);
            }
        },
        onReady() {
            const query = uni.createSelectorQuery().in(this)
            query.select('.area').boundingClientRect(data => {
                if (this.isPop) {
                    this.colsValue = Math.floor(245 / this.viewWidth)
                    if (this.cols > 0) {
                        this.colsValue = this.cols
                        this.viewWidth = 245 / this.cols
                    }
                    for (let item of this.list) {
                        this.addProperties(item)
                    }
                } else {
                    this.colsValue = Math.floor(data.width / this.viewWidth)
                    if (this.cols > 0) {
                        this.colsValue = this.cols
                        this.viewWidth = data.width / this.cols
                    }
                    for (let item of this.list) {
                        this.addProperties(item)
                    }
                }

            })
            query.exec()
        },
        methods: {
            onChange(e, item) {
                if (!item) return
                item.oldX = e.detail.x
                item.oldY = e.detail.y
                if (e.detail.source === 'touch') {
                    if (item.moveEnd) {
                        item.offset = Math.sqrt(Math.pow(item.oldX - item.absX * this.viewWidth, 2) + Math.pow(item.oldY -
                            item.absY * this.viewWidth, 2))
                    }
                    let x = Math.floor((e.detail.x + this.viewWidth / 2) / this.viewWidth)
                    if (x >= this.colsValue) return
                    let y = Math.floor((e.detail.y + this.viewWidth / 2) / this.viewWidth)
                    let index = this.colsValue * y + x
                    if (item.index != index && index < this.imageList.length) {
                        this.changeStatus = false
                        for (let obj of this.imageList) {
                            if (item.index > index && obj.index >= index && obj.index < item.index) {
                                this.change(obj, 1)
                            } else if (item.index < index && obj.index <= index && obj.index > item.index) {
                                this.change(obj, -1)
                            } else if (obj.id != item.id) {
                                obj.offset = 0
                                obj.x = obj.oldX
                                obj.y = obj.oldY
                                setTimeout(() => {
                                    this.$nextTick(() => {
                                        obj.x = obj.absX * this.viewWidth
                                        obj.y = obj.absY * this.viewWidth
                                    })
                                }, 0)
                            }
                        }
                        item.index = index
                        item.absX = x
                        item.absY = y
                        this.sortList()
                    }
                }
            },
            change(obj, i) {
                obj.index += i
                obj.offset = 0
                obj.x = obj.oldX
                obj.y = obj.oldY
                obj.absX = obj.index % this.colsValue
                obj.absY = Math.floor(obj.index / this.colsValue)
                setTimeout(() => {
                    this.$nextTick(() => {
                        obj.x = obj.absX * this.viewWidth
                        obj.y = obj.absY * this.viewWidth
                    })
                }, 0)
            },
            touchstart(item) {
                this.imageList.forEach(v => {
                    v.zIndex = v.index + 9
                })
                item.zIndex = 99
                item.moveEnd = true
                this.tempItem = item
                this.timer = setTimeout(() => {
                    item.scale = this.scale
                    item.opacity = this.opacity
                    clearTimeout(this.timer)
                    this.timer = null
                }, 200)
            },
            touchend(item) {
                this.previewImage(item)
                item.scale = 1
                item.opacity = 1
                item.x = item.oldX
                item.y = item.oldY
                item.offset = 0
                item.moveEnd = false
                setTimeout(() => {
                    this.$nextTick(() => {
                        item.x = item.absX * this.viewWidth
                        item.y = item.absY * this.viewWidth
                        this.tempItem = null
                        this.changeStatus = true
                    })
                }, 0)
            },
            previewImage(item) {
                if (this.timer && this.preStatus && this.changeStatus && item.offset < 28.28) {
                    clearTimeout(this.timer)
                    this.timer = null
                    let src = this.list.findIndex(v => v === item.src)
                    uni.previewImage({
                        urls: this.list,
                        current: src,
                        success: () => {
                            this.preStatus = false
                            setTimeout(() => {
                                this.preStatus = true
                            }, 600)
                        }
                    })
                } else if (this.timer) {
                    clearTimeout(this.timer)
                    this.timer = null
                }
            },
            mouseenter() {
                //#ifdef H5
                this.imageList.forEach(v => {
                    v.disable = false
                })
                //#endif

            },
            mouseleave() {
                //#ifdef H5
                if (this.tempItem) {
                    this.imageList.forEach(v => {
                        v.disable = true
                        v.zIndex = v.index + 9
                        v.offset = 0
                        v.moveEnd = false
                        if (v.id == this.tempItem.id) {
                            if (this.timer) {
                                clearTimeout(this.timer)
                                this.timer = null
                            }
                            v.scale = 1
                            v.opacity = 1
                            v.x = v.oldX
                            v.y = v.oldY
                            this.$nextTick(() => {
                                v.x = v.absX * this.viewWidth
                                v.y = v.absY * this.viewWidth
                                this.tempItem = null
                            })
                        }
                    })
                    this.changeStatus = true
                }
                //#endif
            },
            addImages() {
                if (this.custom) {
                    this.$emit('addImage')
                } else {
                    let checkNumber = this.number - this.imageList.length
                    uni.chooseImage({
                        count: checkNumber,
                        sourceType: ['album', 'camera'],
                        success: res => {
                            let paths = res.tempFilePaths

                            let count = checkNumber <= paths.length ? checkNumber : paths.length;


                            for (let i = 0; i < count; i++) {
                                let file = paths[i];
                                this.$emit('customizeUpload', file)

                                // this.addProperties()
                            }
                        }
                    })
                }
            },
            addImage(image) {
                this.addProperties(image)
            },
            delImage(item, index) {
                this.imageList.splice(index, 1)
                for (let obj of this.imageList) {
                    if (obj.index > item.index) {
                        obj.index -= 1
                        obj.x = obj.oldX
                        obj.y = obj.oldY
                        obj.absX = obj.index % this.colsValue
                        obj.absY = Math.floor(obj.index / this.colsValue)
                        this.$nextTick(() => {
                            obj.x = obj.absX * this.viewWidth
                            obj.y = obj.absY * this.viewWidth
                        })
                    }
                }
                this.add.x = (this.imageList.length % this.colsValue) * this.viewWidth + 'px'
                this.add.y = Math.floor(this.imageList.length / this.colsValue) * this.viewWidth + 'px'
                this.sortList()
            },
            delImageMp(item, index) {
                //#ifdef MP
                this.delImage(item, index)
                //#endif
            },
            sortList() {
                let list = this.imageList.slice()
                list.sort((a, b) => {
                    return a.index - b.index
                })
                for (let i = 0; i < list.length; i++) {
                    list[i] = list[i].src
                }
                this.$emit('update:list', list)
            },
            addProperties(item) {
                let absX = this.imageList.length % this.colsValue
                let absY = Math.floor(this.imageList.length / this.colsValue)
                let x = absX * this.viewWidth
                let y = absY * this.viewWidth
                this.imageList.push({
                    src: item,
                    x,
                    y,
                    oldX: x,
                    oldY: y,
                    absX,
                    absY,
                    scale: 1,
                    zIndex: 9,
                    opacity: 1,
                    index: this.imageList.length,
                    id: this.guid(),
                    disable: false,
                    offset: 0,
                    moveEnd: false
                })
                this.add.x = (this.imageList.length % this.colsValue) * this.viewWidth + 'px'
                this.add.y = Math.floor(this.imageList.length / this.colsValue) * this.viewWidth + 'px'
                this.sortList()
            },
            nothing() {},
            rpx2px(v) {
                return this.width * v / 750
            },
            guid() {
                function S4() {
                    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
                }
                return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
            }
        }
    }
</script>

<style lang="scss" scoped>
    .con {
        display: flex;
        flex-wrap: wrap;

        .area {
            // width: 100%;
            width: 160rpx;
            height: 160rpx;
            margin: 13rpx;
            border-radius: 10rpx;
            position: relative;

            .view {
                display: i;
                justify-content: center;
                align-items: center;

                .area-con {
                    position: relative;

                    .pre-image {
                        width: 100%;
                        height: 100%;
                    }

                    .del-con {
                        position: absolute;
                        top: 0rpx;
                        right: 0rpx;
                        padding: 0 0 20rpx 20rpx;

                        .del-wrap {
                            width: 36rpx;
                            height: 36rpx;
                            background-color: rgba(0, 0, 0, 0.4);
                            border-radius: 0 0 0 10rpx;
                            display: flex;
                            justify-content: center;
                            align-items: center;

                            .del-image {
                                width: 20rpx;
                                height: 20rpx;
                            }
                        }
                    }
                }
            }

            .add {
                position: inherit;

                // flex-wrap: wrap;


                .add-wrap {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    // background-color: #eeeeee;    
                }
            }
        }
    }

    uni-movable-area {
        display: flex;
        justify-content: start;
        flex-wrap: wrap;
        // position: static !important;
    }

    .uni-movable-view {
        // position: static !important;
    }

    .con {
        .area {
            width: 100%;
            height: 100%;

            .view {
                display: contents;
                position: static !important;

                .area-con {
                    margin-bottom: 10px;
                    margin-right: 10px;
                    border-radius: 6px;
                }
            }

            .add {
                position: inherit;
                display: block;
                margin: 0 10rpx 10rpx 0;
            }
        }
    }
</style>

组件引入

<template>
    <view>
        <u-form-item label="上传图片">
            <view style="margin-top: 20rpx;display: block;">
                <shmily-drag-image ref="dragImage" 
                    :isClear="isClear" @customizeUpload="customizeUpload"
                    :number="5" :isAsync="isAsync" :list.sync="imageList">
                </shmily-drag-image>
            </view>
        </u-form-item>
    </view>
</template>
<script>
    import shmilyDragImage from '@/components/shmily-drag-image/shmily-drag-image.vue'
    export default {
        components: {
            shmilyDragImage,
        },
        data() {
            return {
                imageList: [],
                isAsync: false,
                isClear: false,
            }
        },
        methods: {
            customizeUpload(res) {
                this.isClear = false
                let that = this;
                uni.showLoading()
                uni.uploadFile({
                    url: '接口地址',
                    header: {
                        'token': this.userInfo.token, // from data
                    },
                    formData: {

                    },
                    filePath: res,
                    name: 'file',
                    success: (uploadFileRes) => {
                        uni.hideLoading()
                        var ret = JSON.parse(uploadFileRes.data);
                        if (ret.code == 1) {
                            this.$refs.dragImage.addImage(ret.data.url)
                        } else {
                            uni.showToast({
                                title: ret.msg,
                                icon: "none"
                            })
                        }

                    },
                    fail: (err) => {
                        uni.hideLoading()
                    }
                });
            },
        }        
    }
</script>

uniapp上传图片功能
weixin_45818290的博客
08-24 1577
【代码】uniapp上传图片
关于uniapp中的拖拽图片排序，类似发布朋友圈功能的组件学习
a99101的博客
02-21 1490
仅供学习记录 和帮作者推广一下他的插件如果侵权请联系我进行文章删除。
DragImage拖拽赋值组件
yangjie6898862的专栏
11-14 816
DragImage拖拽赋值组件 游戏中的拖拽组件、拖拽类。 游戏开发中经常需要拖拽一个图标来完成赋值操作，比如我们游戏就需要拖拽技能图标到一个孔位上实现技能的装配 重要的3个方法DragIn（拖自己） DragOut(被别人拖) DragSus （拖拽成功后做的表现，不做逻辑）主要就是想把几个阶段分出来，同时做...
shmily-drag-image 图片拖拽排序插件使用教程
gitblog_00641的博客
09-13 282
shmily-drag-image 图片拖拽排序插件使用教程 shmily-drag-image 项目地址: https://gitcode.com/gh_mirrors/sh/shmily-drag-image ...
shmily-drag-image 项目教程
gitblog_00130的博客
09-13 916
shmily-drag-image 项目教程 shmily-drag-image 项目地址: https://gitcode.com/gh_mirrors/sh/shmily-drag-image ...
探索高效图片管理：shmily-drag-image 图片拖拽排序插件
gitblog_00400的博客
09-13 448
探索高效图片管理：shmily-drag-image 图片拖拽排序插件 shmily-drag-image 项目地址: https://gitcode.com/gh_mirrors/sh/shmily-drag-image ...
uniapp，上传照片前进行裁剪
03-13
uniapp，上传照片前进行裁剪
uniapp多张图片上传.rar
03-31
本示例项目 "uniapp多张图片上传.rar" 提供了一个关于如何在 uniapp 中实现多张图片上传的实例，下面我们将详细探讨这个知识点。 首先，`main.js` 是应用的主入口文件，通常用于配置全局变量和挂载根 Vue 实例。在...
uniapp阿里云oss图片直接上传(不需要后端做签名)_uniapp-alioss-util.zip
09-04
uniapp阿里云oss图片直接上传(不需要后端做签名)_uniapp-alioss-util
uniapp上传图片封装
zzll1216的博客
02-06 627
uniapp图片上传封装
微信小程序实现图片拖拽代码与讲解视频
03-26
此学习资源很详细，不仅有微信小程序的代码，代码我都加入了注释，更有配套讲解视频！如果有对微信小程序感兴趣的小伙伴，可以下载资源进行观看。
uniapp 上传本地图片、以二进制流的方式上传
热门推荐
卿本无忧的博客
03-31 1万+
等接口获取到一个本地资源的临时文件路径后，可通过此接口将本地资源上传到指定服务器。将本地资源上传到开发者服务器，客户端发起一个。从本地相册选择图片或使用相机拍照。
拖拽的继承
Shmily的博客
03-16 250
function Drag(ele){ this.ele = ele; this.addEvent(); } Drag.prototype.addEvent = function(){ var that = this; this.ele.onmousedown = function(eve){ ...
android自定义控件--图片拖拽DragImageView
u013145734的专栏
12-13 2568
在项目中遇到了图片拖拽放大的问题，苦于自己的自定义控件功底0.0，只好求助google 在千辛万苦下找到了这位大神的博客http://blog.csdn.net/jj120522/article/details/8467810 上面的博客 详细写出了实现的原理 先贴下效果图 原图 拖拽后的 最后是代码：：： public class DragImageView ext
小程序图片加载不出来
Shmily的博客
04-29 2691
微信小程序的的图片显示不出来 解决方案 1、标签是不是 2、路径有问题 …/父目录 ./同级目录 /根目录 3、需要设置宽和高，不然也显示不出来 4、 （1）、<view></view>包裹<image>标签显示图片 <view> <image src="{{ image }}" ></image> &l...
DevExpress中文教程 - 如何使用AI模型检查HTML编辑中的语法？
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
11-04 782
本文将主要展示如何将AI相关功能添加到HTML编辑控件并调整其UI获得最佳用户体验，欢迎下载最新版组件体验！
一七五、HTML 不同类型的事件及其说明和示例
最新发布
梅某某
11-07 735
HTML 事件处理程序是通过 JavaScript 来捕获和响应不同的用户操作、系统事件或浏览器事件。下面是不同类型的事件及其说明和示例。
【Pikachu靶场：XSS系列】xss之过滤，xss之htmlspecialchars，xss之herf输出，xss之js输出通关啦
m0_47484034的博客
11-05 349
【Pikachu靶场：XSS系列】xss之过滤，xss之htmlspecialchars，xss之herf输出，xss之js输出通关啦
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值