vue+element ui 上传多张图片或视频

<template>

<el-row v-if="form.type==='1'||form.type==='4'||form.type==='5'">
   <el-form-item label="广告图片" prop="ad_img">
       <el-upload
           :limit="5"
           action=""
           accept=".jpg,.jpeg,.JPG,.JPEG,.png,.PNG"
           list-type="picture-card"
           :on-preview="handlePictureCardPreview"
           :on-remove="handleRemove2"
           :http-request="handleUploadImage"
           :before-upload="beforeImageUpload"
           :on-change="changeImgStatus"
           :file-list="temp_img_list">
           <i class="el-icon-plus"></i>
       </el-upload>
       <el-dialog :visible.sync="ImgdialogVisible">
           <img width="100%" :src="temp_img_url" alt="">
       </el-dialog>
       <div v-if="upload_status==2" class="upload-fail">
           上传失败了!
       </div>
   </el-form-item>
</el-row>

</template>

<script>

    import {VueCropper} from 'vue-cropper';

    import selector from '@/components/selector'

    import bus from '../common/bus.js';

    import config from '../../config'

    export default {

        name: "edit_face_adv",

        components: {

            selector,

            VueCropper,

        },

        data() {

            let checkNum = (rule, value, callback) => {

                if (!value) {

                    return callback(new Error('红包数量不能为空'));

                } else {

                    const reg = /^\+?[1-9][0-9]*$/;

                    if (reg.test(value)) {

                        let hb_num = Math.ceil(this.adv_group.hb_budget * 1.5);

                        if (parseInt(value) > hb_num) {

                            return callback(new Error("红包数量不能超过" + hb_num + "个"))

                        } else {

                            callback();

                        }

                    } else {

                        return callback(new Error("请输入正确的红包数量"));

                    }

                }

            };

            let checkHbBudget = (rule, value, callback) => {

                if (!value) {

                    return callback(new Error('红包金额不能为空'));

                } else {

                    const reg = /^\+?[1-9][0-9]*$/;

                    if (reg.test(value)) {

                        if (value < 1) {

                            return callback(new Error("红包金额不能小于1元"))

                        } else {

                            callback();

                        }

                    } else {

                        return callback(new Error("请输入正确的红包金额"));

                    }

                }

            };

            return {

                wxapp_id:'',

                multipleSelection: [],

                title: '',

                form: {},

                loadingData: true,

                loadingText: '拼命加载中',

                garden_filter_text: '',

                isIndeterminate: false,

                checked_garden_list: [],

                checked_region_list: [],

                checked_garden_num: 0,

                checked_adv_list: '',

                CheckedNodes: [],

                region_list: [],

                adv_category_list: [],

                tpl_list: [],

                defaultProps: {

                    children: 'children',

                    label: 'name'

                },

                defaultProps2: {

                    children: 'children',

                    label: 'ad_name'

                },

                adv_group: {},

                limit: {

                    push_hour: 0,//推送时段的选择 0不限 1有限制

                },

                active_step: 1,

                pickerOptions: this.api.get_time_config(),

                adv_tree: [],

                adv_category_select: [],

                adv_list: [],

                goods: {

                    list: [],

                },

                copy: {

                    id: '',

                    visible: false,

                },

                video: {

                    path: '',

                    visible: false,

                    status: 0,

                    file: [],

                    fileList: []

                },

                crop: {

                    file: '',

                    fileList: [],

                    fileName: '',

                    info: true, //裁剪框的大小信息

                    outputSize: 1, // 裁剪生成图片的质量

                    canScale: true, // 图片是否允许滚轮缩放

                    autoCrop: true, // 是否默认生成截图框

                    visible: false,//是否显示弹窗

                    fixedBox: true,// 固定截图框大小 不允许改变  可选值：true | false

                    cropImg: '',

                    imgList: [],

                    imgSrc: '',//图片地址

                    autoCropWidth: 450, // 默认生成截图框宽度

                    autoCropHeight: 250, // 默认生成截图框高度

                    fixed: true, //是否开启截图框宽高固定比例

                    fixedNumber: [9, 5], //截图框的宽高比例

                    centerBox: true,//截图框是否被限制在图片里面

                    enlarge: 1, // 输出图像比例

                    editKey: '',//当前编辑的图片在数组中的key值

                },

                crop2: {

                    file: '',

                    fileList: [],

                    fileName: '',

                    info: true, //裁剪框的大小信息

                    outputSize: 1, // 裁剪生成图片的质量

                    canScale: true, // 图片是否允许滚轮缩放

                    autoCrop: true, // 是否默认生成截图框

                    visible: false,//是否显示弹窗

                    fixedBox: true,// 固定截图框大小 不允许改变  可选值：true | false

                    cropImg: '',

                    imgList: [],

                    imgSrc: '',//图片地址

                    autoCropWidth: 200, // 默认生成截图框宽度

                    autoCropHeight: 200, // 默认生成截图框高度

                    fixed: true, //是否开启截图框宽高固定比例

                    fixedNumber: [1, 1], //截图框的宽高比例

                    centerBox: true,//截图框是否被限制在图片里面

                    enlarge: 1, // 输出图像比例

                    editKey: '',//当前编辑的图片在数组中的key值

                },

                imgFileName: '',

                rules1: {

                    push_limit: [

                        {required: true, message: '请输入推送限制', trigger: 'blur'}

                    ],

                    click_limit: [

                        {required: true, message: '请输入点击限制', trigger: 'blur'}

                    ],

                    fee_method: [

                        {required: true, message: '请选择广告计费方式', trigger: 'blur'}

                    ],

                    unit_price: [

                        {required: true, message: '请填写广告单价', trigger: 'blur'}

                    ],

                    settle_method: [

                        {required: true, message: '请选择广告结算方式', trigger: 'blur'}

                    ],

                    hb_budget: [

                        {required: true, validator: checkHbBudget, trigger: 'blur', min: 1}

                    ],

                    hb_num_budget: [

                        {required: true, message: '请填写红包限领次数', trigger: 'blur'}

                    ],

                    hb_day_num_budget: [

                        {required: true, message: '请填写红包日限领次数', trigger: 'blur'}

                    ],

                    hb_total_num_budget: [

                        {required: true, validator: checkNum, trigger: 'blur'}

                    ],

                    hb_min: [

                        {required: true, message: '请填写红包最小限额', trigger: 'blur'}

                    ],

                    hb_max: [

                        {required: true, message: '请填写红包最高限额', trigger: 'blur'}

                    ],

                    service_fee_percent: [

                        {required: true, message: '请填写该商户发放红包收取的服务费比例', trigger: 'blur'}

                    ]

                },

                rules3: {

                    ad_name: [

                        {required: true, message: '请输入广告名称', trigger: 'blur'}

                    ],

                    ad_link: [

                        {required: true, message: '请输入广告链接', trigger: 'blur'}

                    ],

                    sort: [

                        {required: true, message: '请输入广告排序', trigger: 'blur'}

                    ],

                    intro: [

                        {required: true, message: '请输入引导词', trigger: 'blur'}

                    ],

                    cate_id: [

                        {required: true, message: '请选择广告分类', trigger: 'blur'}

                    ],

                    type: [

                        {required: true, message: '请选择广告投放类型', trigger: 'blur'}

                    ],

                    push_type: [

                        {required: true, message: '请选择广告投放类型', trigger: 'blur'}

                    ],

                    theme_id: [

                        {required: true, message: '请选择加入主题的广告', trigger: 'blur'}

                    ]

                },

                //2020.10.30新增

                gardenForm:{

                    garden_sum:'',

                },

                garden_news_data:[],

                show_a:0,

                uploadForm:{},

                temp_img_list: [], //图片列表

                temp_video_list: [], //视频

                filenews:'', //要上传的图片二进制参数

                fileVideonews:'', //要上传的视频二进制参数

                ImgdialogVisible:false,

                VideodialogVisible:false,

                temp_img_url:'',

                temp_video_url:'',

                upload_status:'',

                img_num:'',

                video_num:'',

                upload_img_list:[], //图片参数

                upload_video_list:[], //提交给后台的视频参数

                postFormData:{}, //提交给后台的数据

                ad_link:'', //提交到后台的参数 广告文件内容

                upload_img_str: '',

                upload_video_str: '',

                agent_data:[], //agent数据信息

                age_data:[], //年龄投放段

                editData:[],

                checked_garden_keys: [],

                // get_band_gardens:[],

            }

        },

        watch: {

            garden_filter_text(val) {

                this.$refs.tree.filter(val);

            },

            // checked_garden_list() {

            //     this.checked_garden_num = this.checked_garden_list.length;

            // },

            'adv_group.fee_method': function (val) {

                if (val == 0) {

                    this.adv_group.settle_method = 2;

                }

            },

            'form.type': function (val) {

                if (val == 4) {

                    this.form.push_type = 1;

                    this.form.is_charge = 0;

                    this.getAdvList();

                }

                if (val == 5) {

                    this.crop.autoCropWidth = 288;

                    this.crop.autoCropHeight = 557;

                } else {

                    this.crop.autoCropWidth = 450;

                    this.crop.autoCropHeight = 250;

                }

            },

        },

        created() {

            let adv_id = this.$route.query.adv_id;

            this.adv_id = adv_id;

            console.log('adv_id-----',adv_id);

            //获取agent数据信息

            this.getData();

            if (this.$refs['form1'] !== undefined) {

                this.$refs['form'].resetFields();

            }

            if (this.$refs['form2'] !== undefined) {

                this.$refs['form'].resetFields();

            }

            if (this.$refs['form3'] !== undefined) {

                this.$refs['form'].resetFields();

            }

            this.garden_filter_text = '';

        },

        activated() {

            let adv_id = this.$route.query.adv_id;

            this.adv_id = adv_id;

            this.getData();

        },

        methods: {

            // 获取广告数据

            getData() {

                this.handleEdit();

            },

            //获取年龄投放段 /api/adv/get_age_slot

            get_age_slot(){

                this.$post(config.wsURL+'/api/adv/get_age_slot').then((res) => {

                    this.age_data = res.data;

                })

            },

     

            //修改

            async handleEdit() {

                let res = await this.$post(config.wsURL+'/api/adv/get_adv_row', {adv_id: this.adv_id});

                if(!res) {

                    this.loadingData = false;

                }

                let advs = res.data.advs; //广告数据

                let gardens = res.data.gardens; //小区数据

                let group = res.data.group; //小区分组数据

                this.crop.imgSrc = '';

                if (this.$refs.tree) {

                    this.$refs.tree.setCheckedNodes([]);

                }

                this.checked_garden_list = [];

                this.temp_img_list = [];

                this.adv_group = {

                    enable: true,

                    start_time: group.start_time,

                    end_time: group.end_time,

                    sex_limit: String(group.sex_limit),

                    age_limit: String(group.age_limit),

                    system_limit: '',

                    click_limit: '0',

                    day_click_limit: '0',

                    push_limit: '0',

                    day_push_limit: '0',

                    week_push_limit: '0',

                    week_click_limit: '0',

                    unit_price: '0',

                    jump_limit: '1',

                    fee_method: String(group.fee_method),

                    day_budget: '0',

                    total_budget: group.total_budget,

                    buyout: '0',

                    settle_method: '2',

                    has_hb: false,

                    hb_range_limit: false,

                    hb_budget: 0,

                    hb_total_num_budget: 0,

                    hb_num_budget: 1,

                    hb_day_num_budget: 1,

                    push_hour: '',

                    garden_list: gardens, //选中的小区数据

                    time_range: [new Date(group.start_time * 1000), new Date(group.end_time * 1000)],

                };

                let type = String(this.$route.params.type)? String(this.$route.params.type):'1';

                this.form = {

                    id: advs.id,

                    ad_name: advs.ad_name,

                    type: String(advs.adv_type),

                    cate_id: '',

                    cate_pid: '',

                    ad_link: '',

                    desc: '',

                    sort: advs.sort,

                    push_type: type === '6' ? true : 0,

                    theme_id: '',

                    from: 1,

                    video: '',

                    wxapp: {

                        url: '',

                        source_id: '',

                        top: 0,

                    },

                    intro: "查看详情",

                    is_wxapp:'0',

                    wxapp_id:'',

                    path:'',

                    act: 'edit'

                };

                // this.form.type= String(this.$route.params.type);

                let date = new Date();

                let year = date.getFullYear();

                let month = date.getMonth() + 1;

                let day = date.getDate();

                let time = year + "-" + month + "-" + day + " " + "00:00:00";

                let year2 = date.getFullYear() + 1;

                let time2 = year2 + "-" + month + "-" + day + " " + "00:00:00";

            

                let ad_str = advs.ad_link;

                let ad_arr = ad_str.split(',');

                for(let i=0;i<ad_arr.length;i++){

                    if(i === 0 && ad_str){

                        console.log(ad_arr[i]);

                        this.temp_img_list.push({

                            'url': ad_arr[i],

                        });

                    }else{

                        this.temp_img_list.push({

                            'url': '',

                        });

                    }

                    // console.log(i);

                }

               

            },

            // ---------------------------- 上传文件st -------------------

            //处理上传图片数据格式

            handleimgStrData(){

                for (let i = 0; i < this.temp_img_list.length; i++) {

                    let url = this.temp_img_list[i].url;

                    this.upload_img_list.push(url);

                }

                let imgStr = "";

                this.upload_img_list.filter((item,i)=>{

                    if(i == this.upload_img_list.length-1) {

                        imgStr+=item;

                    }else{

                        imgStr+=item+",";

                    }

                })

                this.upload_img_str = imgStr;

            },

            //处理上传视频数据格式

            handleVideoStrData(){

                for (let i = 0; i < this.temp_video_list.length; i++) {

                    let url = this.temp_video_list[i].url;

                    this.upload_video_list.push(url);

                }

                let videoStr = "";

                this.upload_video_list.filter((item,i)=>{

                    if(i == this.upload_video_list.length-1) {

                        videoStr+=item;

                    }else{

                        videoStr+=item+",";

                    }

                })

                this.upload_video_str = videoStr;

            },

            //图片放大预览

            handlePictureCardPreview(file) {

                this.temp_img_url = file.url;

                this.ImgdialogVisible = true;

            },

            //删除图片

            handleRemove2(file,fileList) {

                for (let i = 0; i < this.temp_img_list.length; i++) {

                    if (this.temp_img_list[i]['uid'] === file.uid) {

                        this.temp_img_list.splice(i, 1)

                    }

                }

            },

            //获取图片上传的总数

            changeImgStatus(file, fileList){

                this.img_num = fileList.length;

            },

            //获取视频上传的总数

            changeVideoStatus(file, fileList){

                this.video_num = fileList.length;

            },

            //上传图片前判断

            beforeImageUpload(file) {

                var formData = new FormData();

                formData.append('file',file);

                this.filenews = formData;

                const isLt5M = file.size / 1024 / 1024 < 2;

                if (!isLt5M) {

                    this.$message.error('上传图片大小不能超过 2MB!');

                }

                if (this.temp_img_list.length === 5) {

                    this.$message.error('最多上传5张图片!');

                }

            },

            //上传图片方法

            handleUploadImage(e){

                const file = e.file;

                const isLt1M = file.size / 1024 / 1024 <= 2;

                if (!isLt1M) {

                    this.$message.error('上传图片大小不能超过 2MB!');

                    return  false;

                }

                this.$post(config.wsURL+'/api/cos/upload',  this.filenews).then((res) => {

                    if (res) {

                        this.temp_img_list.push({

                            'url': res.data.src,

                        });

                    } else {

                        this.$message.error("上传图片失败");

                        this.upload_status = 2;

                    }

                });

                return false;

            },

            //删除视频

            handleRemoveVideo(file,fileList) {

                for (let i = 0; i < this.temp_video_list.length; i++) {

                    if (this.temp_video_list[i]['uid'] === file.uid) {

                        this.temp_video_list.splice(i, 1)

                    }

                }

            },

            handleVideoCardPreview(file) {

                this.temp_video_url = file.url;

                this.ImgdialogVisible = true;

            },

            beforeVideoUpload(file, fileList) {

                var formData = new FormData();

                formData.append('file',file);

                this.fileVideonews = formData;

                this.video.fileList = [];

                if (!/\.(mp4|3gp|flv|avi|wmv)$/.test(file.name)) {

                    this.$message.error('视频类型必须是mp4,3gp,flv,avi,wmv中的一种');

                    this.video.fileList = [];

                    return false

                }

                if (file.size > 6291456) {

                    this.$message.error('视频大小不能超过6M');

                    this.video.fileList = [];

                    return false

                }

                this.video.file = document.querySelector('input[type=file]').files[0];

                this.video.path = file.url;

                this.temp_video_url = file.url;

            },

            //上传视频

            handleUploadVideo(e) {

                if (this.form.video) {

                    return true;

                }

                this.$post(config.wsURL+'/api/cos/upload',this.fileVideonews).then((res) => {

                    if (res) {

                        this.temp_video_list.push({

                            'url': res.data.src,

                        });

                        this.temp_video_url = res.data.src;

                    } else {

                        this.$message.error('上传视频失败!');

                        this.loadingData = false;

                        throw false;

                    }

                });

            },

            // ---------------------------- 上传文件end ------------------

            // 保存编辑/新增

            async saveEdit() {

                this.loadingText = '提交中,请等待片刻...';

                this.loadingData = true;

                //处理表单校验失败后，去除Loading

                try {

                    await this.$refs['form3'].validate();

                } catch (e) {

                    if (!e) {

                        this.$message.error('请填写广告完整信息!');

                        this.loadingData = false;

                        throw false;

                    }

                }

                //对推送时间段的处理

                this.checkPushHour();

                //对主题广告的处理

                if (this.form.type === '4') {

                    this.getCheckedAdv();

                }

                this.adv_group.start_time = new Date(this.adv_group.time_range[0]).getTime() / 1000;

                this.adv_group.end_time = new Date(this.adv_group.time_range[1]).getTime() / 1000;

                this.form.adv_group = this.adv_group;

                this.form.adv_group.garden_list = this.checked_garden_list;

                //

                // agent_id integer 是 广告商id

                // ad_name string 是 广告名字

                // adv_type integer 是 广告类型 1图片 2视频

                // ad_link string 是 广告文件内容

                // tmp_id integer 是 模版id

                // start_time string 是 广告开始投放时间

                // end_time string 是 广告结束投放时间

                // sex_limit integer 是 性别投放限制 0无限制 1男 2女

                // age_limit integer 是 年龄段投放限制

                // fee_method string 是 计费方式

                // total_budget string 是 总预算

                // band_code object 是 投放小区

                //获取处理好的上传图片数据格式

                this.handleimgStrData();

                //获取上传视频数据

                this.handleVideoStrData();

                // console.log(this.upload_img_str);

                // console.log(this.upload_video_str);

                // return false;

                if(this.form.type == 1){ //图片

                    this.ad_link = this.upload_img_str;

                }else if(this.form.type == 2){ //视频

                    this.ad_link = this.upload_video_str;

                }else{

                    this.ad_link = '';

                }

                // this.adv_group.time_range.join(',');

                // let start_time_arr = this.adv_group.time_range[0].toString();

                // let end_time_arr = this.adv_group.time_range[1].toString();

                // let start_time = start_time_arr.substring(0,10);

                // let end_time = end_time_arr.substring(0,10);

                // console.log(this.adv_group.start_time);

                // console.log(this.adv_group.end_time);

                // console.log(this.form.adv_group.garden_list);

                this.postFormData = {

                    'agent_id': this.agent_data.id,

                    'agent_pid': this.agent_data.pid,

                    'ad_name': this.form.ad_name,

                    'adv_type':this.form.type,

                    'ad_link':this.ad_link,

                    'tmp_id':'1',

                    'start_time':this.adv_group.start_time,

                    'end_time':this.adv_group.end_time,

                    'sex_limit':this.adv_group.sex_limit,

                    'age_limit':this.adv_group.age_limit,

                    'fee_method':this.adv_group.fee_method,

                    'total_budget':this.adv_group.total_budget,

                    'band_code': this.form.adv_group.garden_list,

                    'sort':this.form.sort,

                    'id' : this.adv_id,

                };

                console.log(this.postFormData);

                // return false;

                this.loadingData = false;

                this.$post(config.wsURL+'/api/adv/edit',this.postFormData).then((res) => {

                    this.loadingData = false;

                    if (res.code === 1) {

                        this.$message.success(res.msg);

                        this.$router.push({name: 'face_adv',params:{tag:'edit_face_adv'}});

                    } else {

                        this.loadingData = false;

                        this.$message.error(res.msg);

                    }

                })

            },

            handleClick(tab, event) {

            },

        }

    }

</script>