上传图片组件

结合bootstrap、vue编写

1、HTML

<template v-for="(item, index) in images" :key="index">
    <div class="col-md-3 img-wrapper">
      <img class="img-detail" :src="item.src">
      <span @click="deleteImg(index)" v-if="index>0 && (item.src != '')" class="icon-wrapper">
          <i class="glyphicon glyphicon-remove-sign icon-remove"></i>
      </span>
      <div class="operate">
          <input type="file" class="btn input" @change="change(event, index)">
          <button class="btn btn-default btn-upload">@{{ item.src ? '修改图片' : '上传图片' }}</button>
      </div>
   </div>
</template>
<div class="modal-footer">
   <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
   <button @click="saveImg" type="button" class="btn btn-primary">保存</button>
</div>

2、JS

①input[type="file"]是在change的时候调用change方法，如果click调用的话未获取到url

②Ajax：success是请求成功时调用的方法，error是请求失败调用的方法

　　　　success里respond.status为true：后台操作成功，否则后台操作失败

③Ajax：this指的是Ajax，所以使用Ajax之前要定义一下this，使它指向vue

var vue = new Vue({
            el : '#image-model',
            data : {
                images : [
                    {des : '正面',  src : '', name : 'front'},
                    {des : '左侧面',  src : '', name : 'left'},
                    {des : '右侧面',  src : '', name : 'right'},
                    {des : '背面',  src : '', name : 'behind'}
                ],
                id : null
            },
            methods : {
                getData (id) {
                    this.id = id;
                    var _this = this;
                    $.ajax({
                        type : 'post',
                        url : '{{url('/admin/images')}}',
                        data : {id : id, _token : $("#_token").val()},
                        success : function (res) {
                            if (res.status) {
                                let data = res.data;
                                _this.updateProduct(data);
                                $('#image-model').modal();
                            }
                            else
                                alert(res.info);
                        }
                    });
                },
                updateProduct(product) {
                    let init = [];
                    let allow = ['front', 'left', 'right', 'behind'];
                    let has = [];
                    if (product instanceof Array) {
                        product.forEach(item => {
                            init.push({
                                des : item.type_desc,
                                src : (/^(\/upload)/.test(item.src)) ? ('http://www.chrent.cn'+item.img_path) : item.img_path,
                                name : item.img_type,
                                updated_at : item.updated_at
                            });
                            has.push(item.img_type);
                        });
                    }
                    //求差集
                    let diff = allow.filter(key => has.indexOf(key) == -1)
                    diff.forEach(key => {
                        switch (key) {
                            case 'left' :
                                init.push({des : '左侧面', src : '', name : key})
                                break;
                            case 'right' :
                                init.push({des : '右侧面', src : '', name : key});
                                break;
                            case 'behind' :
                                init.push({des : '背面', src : '', name : key});
                                break;
                            case 'front' :
                                init.push({des : '正面', src : '', name : key});
                                break;
                        }
                    });

                    /*重新排序*/
                    let array = [];
                    allow.forEach(item => {
                        init.forEach(val => {
                            if (val.name == item) array.push(val);
                        })
                    })
                    this.images =  array;
                },
                deleteImg(index){
                    console.log(this.images, index)
                    if (/^(data:\s*(image\/(\w+));base64,)/.test(this.images[index].src)) {
                        this.images[index].src = ''; return;
                    }
                    let _this = this;
                    let param = {
                        base_id : {{$data->id}},
                        product_serinum_id : this.id,
                        img_type : this.images[index].name,
                        base_objcode_id : {{$product[0]->objcode_id}}
                    };
                    $.ajax({
                        type: 'post',
                        url: '{{url('/admin/rentorder/image/delete')}}',
                        data: param,
                        success: function(res){
                            console.log(res);
                            let data = res.data;
                            if (data.status) {
                                _this.images[index].src = '';
                            }
                            alert(res.info);
                        },
                        error: function (err) {
                            alert('删除失败');
                        }
                    });
                },
                saveImg (){
                    if (this.images[0].src == '')
                        alert('正面必须上传');
                    else {
                        let _this = this;
                        let pic = {};
                        _this.images.forEach((item) => {
                            pic[item.name] = (/^(\/upload)/.test(item.src)) ? 'http://www.chrent.cn'+item['src'] : item['src'];
                        });
                        if (Object.keys(pic).length == 0) return;
                        let params = {};
                        params = {
                            ...pic,
                            order_id : {{$data->id}},
                            product_serinum_id : _this.id,
                            type : 'rent'
                        };
                        let url = "{{url('admin/rentorder/upload')}}";
                        $.ajax({
                            type: 'post',
                            data: params,
                            url: url,
                            success: function(res) {
                                alert(res.info);
                                let data = res.data;
                            },
                            error: function (err) {
                            }
                        });
                        $('#image-model').modal('hide');
                    }
                },
                change (e, index) {
                    this.showImage(e.target.files[0], index);
                },
                showImage (data, i) {
                    this.readFiles(data, i);
                },
                readFiles (data, i) {
                    let self = this;
                    let reader = new FileReader();
                    reader.onload = (e) => {
                        let src = e.target.result;
                        self.images[i].src = src;
                    };
                    if (data) {
                        let images = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/bmp'];
                        if (images.indexOf(data.type) == -1) {
                            alert('不支持的文件格式');
                            return ;
                        };
                        reader.readAsDataURL(data);
                    }

                }
            }
        });
    </script>