elementui展示多张图片_vue+element ui 上传多张图片或视频-程序员宅基地
技术标签： elementui展示多张图片
: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) {
},
}
}
智能推荐
使用nginx解决浏览器跨域问题_nginx不停的xhr-程序员宅基地
文章浏览阅读1k次。通过使用ajax方法跨域请求是浏览器所不允许的，浏览器出于安全考虑是禁止的。警告信息如下：不过jQuery对跨域问题也有解决方案，使用jsonp的方式解决，方法如下：$.ajax({ async:false, url: 'http://www.mysite.com/demo.do', // 跨域URL ty..._nginx不停的xhr
在 Oracle 中配置 extproc 以访问 ST_Geometry-程序员宅基地
文章浏览阅读2k次。关于在 Oracle 中配置 extproc 以访问 ST_Geometry，也就是我们所说的 使用空间SQL 的方法，官方文档链接如下。http://desktop.arcgis.com/zh-cn/arcmap/latest/manage-data/gdbs-in-oracle/configure-oracle-extproc.htm其实简单总结一下，主要就分为以下几个步骤。..._extproc
Linux C++ gbk转为utf-8_linux c++ gbk->utf8-程序员宅基地
文章浏览阅读1.5w次。linux下没有上面的两个函数，需要使用函数 mbstowcs和wcstombsmbstowcs将多字节编码转换为宽字节编码wcstombs将宽字节编码转换为多字节编码这两个函数，转换过程中受到系统编码类型的影响，需要通过设置来设定转换前和转换后的编码类型。通过函数setlocale进行系统编码的设置。linux下输入命名locale -a查看系统支持的编码_linux c++ gbk->utf8
IMP-00009: 导出文件异常结束-程序员宅基地
文章浏览阅读750次。今天准备从生产库向测试库进行数据导入，结果在imp导入的时候遇到“ IMP-00009:导出文件异常结束” 错误，google一下，发现可能有如下原因导致imp的数据太大，没有写buffer和commit两个数据库字符集不同从低版本exp的dmp文件，向高版本imp导出的dmp文件出错传输dmp文件时，文件损坏解决办法：imp时指定..._imp-00009导出文件异常结束
python程序员需要深入掌握的技能_Python用数据说明程序员需要掌握的技能-程序员宅基地
文章浏览阅读143次。当下是一个大数据的时代，各个行业都离不开数据的支持。因此，网络爬虫就应运而生。网络爬虫当下最为火热的是Python，Python开发爬虫相对简单，而且功能库相当完善，力压众多开发语言。本次教程我们爬取前程无忧的招聘信息来分析Python程序员需要掌握那些编程技术。首先在谷歌浏览器打开前程无忧的首页，按F12打开浏览器的开发者工具。浏览器开发者工具是用于捕捉网站的请求信息，通过分析请求信息可以了解请..._初级python程序员能力要求
Spring @Service生成bean名称的规则（当类的名字是以两个或以上的大写字母开头的话，bean的名字会与类名保持一致）_@service beanname-程序员宅基地
文章浏览阅读7.6k次，点赞2次，收藏6次。@Service标注的bean，类名：ABDemoService查看源码后发现，原来是经过一个特殊处理：当类的名字是以两个或以上的大写字母开头的话，bean的名字会与类名保持一致public class AnnotationBeanNameGenerator implements BeanNameGenerator { private static final String C..._@service beanname
随便推点
二叉树的各种创建方法_二叉树的建立-程序员宅基地
文章浏览阅读6.9w次，点赞73次，收藏463次。1.前序创建#include<stdio.h>#include<string.h>#include<stdlib.h>#include<malloc.h>#include<iostream>#include<stack>#include<queue>using namespace std;typed_二叉树的建立
解决asp.net导出excel时中文文件名乱码_asp.net utf8 导出中文字符乱码-程序员宅基地
文章浏览阅读7.1k次。在Asp.net上使用Excel导出功能，如果文件名出现中文，便会以乱码视之。 解决方法： fileName = HttpUtility.UrlEncode(fileName, System.Text.Encoding.UTF8);_asp.net utf8 导出中文字符乱码
笔记-编译原理-实验一-词法分析器设计_对pl/0作以下修改扩充。增加单词-程序员宅基地
文章浏览阅读2.1k次，点赞4次，收藏23次。第一次实验 词法分析实验报告设计思想词法分析的主要任务是根据文法的词汇表以及对应约定的编码进行一定的识别，找出文件中所有的合法的单词，并给出一定的信息作为最后的结果，用于后续语法分析程序的使用；本实验针对 PL/0 语言 的文法、词汇表编写一个词法分析程序，对于每个单词根据词汇表输出： (单词种类, 单词的值) 二元对。词汇表：种别编码单词符号助记符0beginb..._对pl/0作以下修改扩充。增加单词
android adb shell 权限,android adb shell权限被拒绝-程序员宅基地
文章浏览阅读773次。我在使用adb.exe时遇到了麻烦.我想使用与bash相同的adb.exe shell提示符,所以我决定更改默认的bash二进制文件(当然二进制文件是交叉编译的,一切都很完美)更改bash二进制文件遵循以下顺序> adb remount> adb push bash / system / bin /> adb shell> cd / system / bin> chm..._adb shell mv 权限
投影仪-相机标定_相机-投影仪标定-程序员宅基地
文章浏览阅读6.8k次，点赞12次，收藏125次。1. 单目相机标定引言相机标定已经研究多年，标定的算法可以分为基于摄影测量的标定和自标定。其中，应用最为广泛的还是张正友标定法。这是一种简单灵活、高鲁棒性、低成本的相机标定算法。仅需要一台相机和一块平面标定板构建相机标定系统，在标定过程中，相机拍摄多个角度下（至少两个角度，推荐10~20个角度）的标定板图像（相机和标定板都可以移动），即可对相机的内外参数进行标定。下面介绍张氏标定法（以下也这么称呼）的原理。原理相机模型和单应矩阵相机标定，就是对相机的内外参数进行计算的过程，从而得到物体到图像的投影_相机-投影仪标定
Wayland架构、渲染、硬件支持-程序员宅基地
文章浏览阅读2.2k次。文章目录Wayland 架构Wayland 渲染Wayland的 硬件支持简 述： 翻译一篇关于和 wayland 有关的技术文章, 其英文标题为Wayland Architecture .Wayland 架构若是想要更好的理解 Wayland 架构及其与 X (X11 or X Window System) 结构；一种很好的方法是将事件从输入设备就开始跟踪, 查看期间所有的屏幕上出现的变化。这就是我们现在对 X 的理解。 内核是从一个输入设备中获取一个事件，并通过 evdev 输入_wayland