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

<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>

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>

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

全部评论

关注公众号QQ交流群