本文介绍了如何使用Vue和Element UI实现多张图片上传及视频处理的功能，包括图片预览、删除、上传限制，以及视频类型的检查和大小限制。同时，文章还展示了如何通过裁剪工具进行图片裁剪，并提供了相关的表单验证规则。
: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">
上传失败了!
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
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_idinteger是广告商id
// ad_namestring是广告名字
// adv_typeinteger是广告类型 1图片 2视频
// ad_linkstring是广告文件内容
// tmp_idinteger是模版id
// start_timestring是广告开始投放时间
// end_timestring是广告结束投放时间
// sex_limitinteger是性别投放限制 0无限制 1男 2女
// age_limitinteger是年龄段投放限制
// fee_methodstring是计费方式
// total_budgetstring是总预算
// band_codeobject是投放小区
//获取处理好的上传图片数据格式
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) {
},
}
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
