使用vue多组图片上传

àì夳堔傛蜴生んèń 2021-09-15 15:50 426阅读 0赞

本文使用原生的上传有局限性，ios手机能同时选择多张图片，而安卓手机只能一张一张上传，不能一次性选择多张。所以建议调用 微信JS SDK。

![70][]

代码如下：

<template>
        <div class="start-work viewport">
            <div class="hd tc">
                <div class="inner-wrap">
                    <div class="task-name">张三 - 幸福花园 19#404</div>
                    <div class="time">2018-08-08</div>
                </div>
            </div>
            
            
            <dl class="receipt-pic pub-section">
                <dt>
                    <h3>收货照片 <span class="c-999">（限9张）</span></h3>
                </dt>
                <dd class="cf">
                    <div class="add-pic fl" v-if="formDatas.receive_imgs.length < 9">
                        <input name="files" type="file" id="file" accept="image/*" multiple="multiple" @change="imgChange($event)" />
                        <i class="icon iconfont icon-jia"></i>
                        <label for="file"></label>
                    </div>
    
                    <div class="pic-item fl" v-for="(item,index) in formDatas.receive_imgs" :key="index">
                        
                        <img :src="item" alt="">
                        <span class="delete-pic" @click="deletePic(index)">
                            <i class="icon iconfont icon-icon-test"></i>
                        </span>
                    </div>
                </dd>
            </dl>
            <div class="ft">
                
                <div class="allow-start">
                    <div class="label">
                        周末是否允许开工
                    </div>
                    <div class="v">
                        <div class="j-radio l-txt" v-for="(type,index) in allowStartData" :key="index">
                            <label>
                                <span class="txt">{
       {type.label}}</span>
                                <input type="radio" name="houseType" v-model="allowStartType" :value="type.value" :checked="type.value === allowStartType ? true : false">
                                <span class="icon"></span>
                            </label>
                        </div>
                    </div>
                </div>
    
                <div class="start-btn">
                    <span class="btn" @click="strtWorkFn">
                        开工
                    </span>
                </div>
            </div>
        </div>
    </template>
    
    <script>
    import Vue from 'vue'
    import { Toast, Spinner} from 'mint-ui'
    import Oss from '@/assets/js/util/aliyunOss.js'
    Vue.component(Spinner.name, Spinner)
    export default {
        data () {
            return {
                allowStartType: '1',
                allowStartData: [
                    {
                        label: '允许',
                        value: '1'
                    },
                    {
                        label: '不允许',
                        value: '2'
                    }
                ],
                sign: {
                    accessid: '',
                    dir: '',
                    expire: '',
                    host: '',
                    policy: '',
                    signature: ''
                },
                formDatas: {
                    purchase_id: '',
                    receive_imgs: [],
                    products: [],
                    remark: ''
                }
            }
        },
        created () {
        },
        mounted () {
            let _this = this
            Oss.getSign(200).then((res) => { // 获取签名
                _this.sign = res.data
                console.log(_this.sign)
                // console.log('this.sign', _this.sign)
            }).catch((err) => {
                console.log('err', err)
            })
        },
        methods: {
            apiUploadOss (ossData) {
                let _this = this
                // this.$http({
                //     url: this.sign.host,
                //     method: 'post',
                //     data: ossData,
                //     onUploadProgress (progressEvent) { // 原生获取上传进度的事件
                //         if (progressEvent.lengthComputable) {
                //             console.log(progressEvent)
                //             console.log('百分比', (progressEvent.loaded / progressEvent.total) * 100)
                //         }
                //     }
                // }).then(function (res) {
                //     _this.formDatas.receive_imgs.push(_this.sign.host + '/' + ossData.get('key'))
                //     console.log('路劲：', _this.sign.host + '/' + ossData.get('key'))
                // }).catch(function (err) {
                //     console.log(err)
                // })
                this.$http.post(_this.sign.host, ossData).then(function (res) {
                    _this.formDatas.receive_imgs.push(_this.sign.host + '/' + ossData.get('key'))
                    console.log('路劲：', _this.sign.host + '/' + ossData.get('key'))
                }).catch(function (err) {
                    console.log(err)
                })
            },
            imgChange (e) {
                console.log('初次点击')
                let _this = this
                let files = e.target.files
                console.log(files)
                // 验证数量
                if ((this.formDatas.receive_imgs.length + files.length) > 9) {
                    Toast('最多只能上传9张图片')
                    return
                }
    
                // 验证格式
                for (let i = 0; i < files.length; i++) {
                    if (!/.(jpg|jpeg|png)$/.test(e.target.files[i].name)) {
                        Toast('文件必须是jpeg,jpg,png中的一种')
                        return
                    }
                    // else {
                    //     this.formDatas.receive_imgs.push(true) // 表示加载中
                    // }
                }
    
                for (let i = 0; i < files.length; i++) {
                    let file = e.target.files[i] // 获取图片资源
                    let filename = file.name
    
                    // 获取最终需要上传的参数
                    let ossData = Oss.getFormDataParams(_this.sign, filename)
    
                    // 添加文件
                    let reader = new FileReader()
                    let oImg = new Image()
                    let uploadInfo = {}
                    console.log('ossData', ossData)
    
                    reader.onload = function (e) {
                        uploadInfo.imageBase64 = e.target.result
                        let src = uploadInfo.imageBase64
                        // $('#thumbnail-list').append("1->:"+getSizeByBase64(uploadInfo.imageBase64))
    
                        oImg.onload = function () {
                            src = Oss.compress(oImg, 0.8)
                            // 添加最后需要的参数
                            ossData.append('file', Oss.convertBase64UrlToBlob(src), filename)
                            // 开始上传
                            _this.apiUploadOss(ossData)
                        }
                        oImg.src = src
                        return true
                    }
                    reader.readAsDataURL(file)
                }
            },
            deletePic (index) {
                this.formDatas.receive_imgs.splice(index, 1)
                console.log(this.formDatas.receive_imgs)
            },
            strtWorkFn () {
                let _this = this
                let work_on_weekend = '1'
                if (this.allowStartType === '1') {
                    work_on_weekend = true
                } else if (this.allowStartType === '2') {
                    work_on_weekend = false
                }
                this.$http.post('/api/steward/projects/' + _this.$route.query.contract_id + '/start', {contract_id: _this.$route.query.contract_id, work_on_weekend: work_on_weekend, work_images: _this.formDatas.receive_imgs}).then((res) => {
                    let datas = res.data
                    if (datas.code === 0) {
                        console.log(datas)
                    } else {
                        Toast({
                            message: datas.msg,
                            duration: 2000
                        })
                    }
                })
            }
        }
    }
    </script>
    
    <style lang="less" scoped >
        @import (reference) "~less/base.less";
        .start-work{
            font-size:.28rem;
            .hd{
                background:#fff;
                padding-left:.38rem;
                .inner-wrap{
                    padding:.5rem .38rem .2rem 0;
                }
            }
            // 收货图片
            .receipt-pic{
                padding: 0.5rem 0 0 0.4rem;
                border-bottom:.1rem solid @c-f5;
                h3{
                    border-bottom:1px solid @c-border;
                    padding-bottom: 0.2rem;
                    span{
                        font-size:.14rem;
                        color: @c-999;
                    }
                }
                dd {
                    padding:.44rem 0 .6rem;
                    .add-pic {
                        position:relative;
                        border: 2px dashed @c-999;
                        width: 1.34rem;
                        height: 1.34rem;
                        float: left;
                        text-align: center;
                        margin-right:.2rem;
                        box-sizing: border-box;
                        .icon-jia{
                            font-size:.54rem;
                            color:@c-999;
    
                            line-height:1.32rem;
                        }
    
                        label{
                            position:absolute;
                            top:0;
                            left:0;
                            z-index:1;
                            width:100%;
                            height:100%;
                        }
    
                        input{
                            width: 0.1px;
                            height: 0.1px;
                            opacity: 0;
                            overflow: hidden;
                            position: absolute;
                            z-index: -1;
                        }
                    }
                    .pic-item {
                        position:relative;
                        width: 1.34rem;
                        height: 1.34rem;
                        margin:0 .2rem .2rem 0;
                        img {
                            width: 100%;
                            height: 100%;
                        }
                        .delete-pic{
                            position:absolute;
                            top:-.15rem;
                            right:-.15rem;
                            background:@c-high;
                            border-radius: 50%;
                            z-index:1;
                            width:.38rem;
                            height:.38rem;
                            text-align: center;
                            line-height:.38rem;
                            .tc;
                        }
                        .icon-icon-test{
                            font-size:.12rem;
                            color:#fff;
                            display:inline-block;
                            transform: scale(0.8,0.8);
                        }
                    }
                }
            }
    
            .ft{
                background:#fff;
                padding:.4rem .38rem .88rem;
    
                .allow-start{
                    .display-flex;
                    line-height:.4rem;
    
                    .v{
                        flex: 1;
                        .tr;
                    }
    
                    .j-radio:last-child{
                        margin-left:.4rem;
                    }
                }
    
                .start-btn{
                    margin-top:2.5rem;
                }
                .btn{
                    .btn-main(100%,1rem,.28rem, 5px);
                    background:@c-main;
                    color:#fff;
                }
            }
        }
    </style>

aliyunOss.js文件，需要获取后台签名。

import Axios from 'axios'
    export default {
        getSign (module) {
            return new Promise(function (resolve, reject) {
                // Axios.post('http://test.enlife.jjcclife.com/api/user/upload/sign?token=e1411e831c3a054610427bca05385583', {
                Axios.post('/api/images/sign', {
                    module: module
                }).then(function (res) {
                    let datas = res.data
                    if (datas.code === SUCCESS_CODE) {
                        resolve(datas)
                    } else {
                        reject(datas)
                    }
                }).catch(function (err) {
                    reject(err)
                })
            })
        },
        randomString (len) {
            len = len || 32
            let chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
            let maxPos = chars.length
            let pwd = ''
            for (let i = 0; i < len; i++) {
                pwd += chars.charAt(Math.floor(Math.random() * maxPos))
            }
            return pwd
        },
        convertBase64UrlToBlob (urlData) {
            let bytes = window.atob(urlData.split(',')[1]) // 去掉url的头，并转换为byte
    
            // 处理异常,将ascii码小于0的转换为大于0
            let ab = new ArrayBuffer(bytes.length)
            let ia = new Uint8Array(ab)
            let mimeString = urlData.split(',')[0].split(':')[1].split(';')[0]
            for (let i = 0; i < bytes.length; i++) {
                ia[i] = bytes.charCodeAt(i)
            }
    
            return new Blob([ab], {type: mimeString})
        },
        getFormDataParams (sign, fileName) {
            // 构造formdata表单数据
            let ossData = new FormData()
            // let key = sign.dir + '/' + this.randomString() + '.' + fileName.split('.')[1]
            let key = ''
            if (/\/$/.test(sign.dir)) {
                key = sign.dir + this.randomString() + '.' + fileName.split('.')[1]
            } else {
                key = sign.dir + '/' + this.randomString() + '.' + fileName.split('.')[1]
            }
            console.log('key', key)
            ossData.append('OSSAccessKeyId', sign.accessid)
            ossData.append('policy', sign.policy)
            ossData.append('Signature', sign.signature)
            ossData.append('success_action_status', 200)
            ossData.append('key', key)
    
            return ossData
        },
        compress (img, quality) {
            let canvas = document.createElement('canvas')
            let ctx = canvas.getContext('2d')
    
            // 瓦片canvas
            let tCanvas = document.createElement('canvas')
            let tctx = tCanvas.getContext('2d')
    
            // let maxSize = 200 * 1024 // 200KB
            quality = quality || 0.8 // 图片压缩质量
    
            let initSize = img.src.length
            let width = img.width
            let height = img.height
            // 如果图片大于四百万像素，计算压缩比并将大小压至400万以下
            let ratio
            if ((ratio = width * height / 4000000) > 1) {
                ratio = Math.sqrt(ratio)
                width /= ratio
                height /= ratio
            } else {
                ratio = 1
            }
            canvas.width = width
            canvas.height = height
            //  铺底色
            ctx.fillStyle = '#fff'
            ctx.fillRect(0, 0, canvas.width, canvas.height)
            // 如果图片像素大于100万则使用瓦片绘制
            let count
            if ((count = width * height / 1000000) > 1) {
                count = ~~(Math.sqrt(count) + 1) // 计算要分成多少块瓦片
                //      计算每块瓦片的宽和高
                let nw = ~~(width / count)
                let nh = ~~(height / count)
                tCanvas.width = nw
                tCanvas.height = nh
                for (let i = 0; i < count; i++) {
                    for (let j = 0; j < count; j++) {
                        tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh)
                        ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh)
                    }
                }
            } else {
                ctx.drawImage(img, 0, 0, width, height)
            }
            // 进行最小压缩
            let ndata = canvas.toDataURL('image/jpeg', quality)
    
            // console.log('压缩前：' + initSize)
            // console.log('压缩后：' + ndata.length)
            // console.log('压缩率：' + ~~(100 * (initSize - ndata.length) / initSize) + '%')
            tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0
    
            // document.write(ndata);
            if (initSize > ndata.length) { // 压缩后比原来还大，就使用原图
                return ndata
            } else {
                // return img.src
                return ndata
            }
        }
    }

**[卓越的云计算服务提供商,230万+用户正在享受阿里云"稳定,安全,低成本"的产品服务,金牌服务:免费体验,专业快速备案,7x24小时售后,服务器只选阿里云][230_7x24]**

[70]: /images/20210813/f3a16ce0cc3d4bb7b8377753f754a648.png
[230_7x24]: https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=uoe4s7nc