element-ui 上传多张图片
2021-11-04 本文已影响0人
__鹿__
main.js引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
<template>
<div>
<div class="addNew">
<div class="HeaderDiv">
<img class="previous" @click="goBackPage()" src="../assets/img/icon_previous.png" alt="">
{{headerText}}
</div>
<div class="content">
<!-- <div class="title">增加新品</div> -->
<div>
<div class="divRow">
<label class="layui-form-label">门店：</label>
<div class="layui-input-block">
<input type="text" v-model="addShop" id="" name="store" class="layui-input">
</div>
</div>
<div class="divRow">
<label class="layui-form-label">铺位号：</label>
<div class="layui-input-block">
<input type="text" id="" v-model="addShopNo" name="shopNo" class="layui-input">
</div>
</div>
<div class="divRow">
<label class="layui-form-label">公示开始时间：</label>
<div class="layui-input-block">
<input type="text" readonly v-model="addStartDate" name="startDate" placeholder="提交时自动获取" class="layui-input dateInput">
</div>
</div>
<div class="divRow">
<label class="layui-form-label">公示结束时间：</label>
<div class="layui-input-block">
<input type="text" readonly v-model="addEndDate" name="endDate" placeholder="根据开始日期自动计算" class="layui-input dateInput">
</div>
</div>
<div class="divRow">
<label class="layui-form-label">联系方式：</label>
<div class="layui-input-block">
<input type="number" v-model="addNumber" name="addNumber" class="layui-input dateInput">
</div>
</div>
<div class="divRow">
<label class="layui-form-label">新品说明：</label>
<div class="layui-input-block">
<textarea name="desc" v-model="addDesc" placeholder="请输入您的反馈" class="layui-textarea"></textarea>
</div>
</div>
<!-- 上传图片开始 -->
<div class="addImgDiv">
<div>上传图片：
<p class="tishiInfo">
( 图片大小不能超过3M,格式为JPG、JPGE、PNG )
</p>
</div>
<div class="ImgContent">
<el-upload
:action="axiosBaseURL+'/addNewArrival?shops='+addShopNo"
list-type="picture-card"
:auto-upload="false"
:limit='20'
accept="image/jpeg,image/jpg,image/png"
:on-exceed='uploadNumber'
:multiple="true"
:on-change="handleChange"
:file-list="imgShowList"
ref="upload"
>
<!-- accept=".jpg,.jpeg,.png" -->
<i slot="default" class="el-icon-plus"></i>
<div slot="file" slot-scope="{file}">
<img
class="el-upload-list__item-thumbnail"
:src="file.url" alt=""
>
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
>
<i class="el-icon-zoom-in"></i>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleRemove(file)"
>
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload>
</div>
</div>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
<!-- 上传图片结束 -->
</div>
</div>
<div class="btn">
<button class="layui-btn sure" @click="addNewProduct()">确定</button>
</div>
</div>
<!-- <van-popup v-model="datetimeShow" position="bottom">
<van-datetime-picker
v-model="currentDate"
type="datetime"
title="选择时间"
:min-date="minDate"
@confirm="dateConfirm"
@cancel="datetimeShow = false"
:formatter="formatter"
/>
</van-popup> -->
<!-- :max-date="maxDate" -->
<div class="tishiDiv" v-if="tishiPop">
<p>{{tishiText}}</p>
</div>
</div>
</template>
<script>
var qs = require("qs");
const padDate = function (value) {
return value < 10 ? `0${value}` : value;
};
const shopInfo = window.sessionStorage.getItem('shop');
const shopNoInfo = window.sessionStorage.getItem('shopNo');
export default {
components: {
},
data() {
return {
headerText:"增加新品",
addShop:shopInfo,//门店
addShopNo:shopNoInfo,//铺位号
// addStartDate:"",//公示开始时间
// addEndDate:"",//公示结束时间
addNumber:"",//联系方式
addDesc:"",//新品说明
addPictures:"",//新品图片
dialogImageUrl: '',
dialogVisible: false,
disabled: false,
requireUrl: "",
tishiText:'',
tishiPop:false,
timer:null,
imgFileVal:{},
// minDate:new Date(),
// maxDate: new Date(2025, 10, 1),
currentDate:'',
datetimeShow:false,
axiosBaseURL:window.axiosBaseURL,
imgFileList:[],//传给后台的图片
imgShowList:[],//页面展示的图片
};
},
methods: {
goBackPage(){
this.$router.push({
path: "/",
});
},
addNewProduct() {
let that = this;
if(!this.addNumber){
this.tishiFun('请输入联系方式');
return false;
}
var re = /^\d{11}$/
if(!re.test(this.addNumber)) {
this.tishiFun('请输入正确的手机号码');
return false;
}
if(this.imgFileList.length <= 0){
this.tishiFun('请上传图片');
return false;
}
this.formDate = new FormData();
this.formDate.append('shop',this.addShop); //门店
this.formDate.append('shops',this.addShopNo); //铺位号
this.formDate.append('publicityStartTime',this.addStartDate); //公示开始时间
this.formDate.append('publicityEndTime',this.addEndDate);//公示结束时间
this.formDate.append('contactWay',this.addNumber);//手机号
this.formDate.append('productDescription',this.addDesc);//新品说明
for (let index = 0; index < this.imgFileList.length; index++) {
this.formDate.append('file', this.imgFileList[index]);
}
this.$refs.upload.submit();
this.$http
.post(
"/addNewArrival?shops="+this.addShopNo,
this.formDate,
)
.then(res => {
if (res.data.code == 200) {
that.$confirm('增加新品成功！是否跳转到我的申请页面', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'success'
}).then(() => {
that.$router.push({
name: "newProduct",
params: {
toTabType:2,//跳到我的申请
}
});
}).catch(() => {
});
} else{
this.tishiFun('增加新品失败！');
}
})
.catch(err => {
this.tishiFun('增加新品失败 ！');
});
},
uploadNumber(file, fileList){ //限制图片数量
this.tishiFun('最多只能上传20张图片');
},
handleChange(file, fileList){
let isYes = this.beforeAvatarUpload(file);
this.imgFileList.push(file.raw);
this.imgShowList.push({ name: file.name, url: file.url });
if(!isYes){ //图片不符合规定
this.handleRemove(file, fileList)
}
},
handleRemove(file,fileList) {
const that = this;
// 1.获取将要删除图片的临时路径
const filePath = file.name
// 2.找到图片对应的索引值
this.imgFileList.forEach(function(element,key) {
if(element.name === filePath){
that.imgFileList.splice(key, 1);//传给后台的图片
that.imgShowList.splice(key, 1);//页面展示的图片
}
});
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
beforeAvatarUpload(file) {
const isJPG = file.raw.type === 'image/jpeg';
const isPNG = file.raw.type === 'image/png';
const isLt2M = file.raw.size / 1024 / 1024 < 3;
if (!isJPG && !isPNG) {
this.tishiFun('图片只能是 JPG 或 png 格式!');
return false;
}
if (!isLt2M) {
this.tishiFun('图片大小不能超过 3MB!');
return false;
}
return true;
},
dateConfirm(dd){
this.datetimeShow = false;
},
changeStartTime(){
this.datetimeShow = true;
},
// 选项格式化函数
formatter (type, value) {
if (type === 'year') {
return `${value}年`
} else if (type === 'month') {
return `${value}月`
} else if (type === 'day') {
return `${value}日`
} else if (type === 'hour') {
return `${value}时`
} else if (type === 'minute') {
return `${value}分`
} else if (type === 'second') {
return `${value}秒`
}
return value
},
toData(dataTime){
const date = new Date(dataTime);
const year = date.getFullYear();
const month = padDate(date.getMonth() + 1);
const day = padDate(date.getDate());
const hours = padDate(date.getHours());
const minutes = padDate(date.getMinutes());
const seconds = padDate(date.getSeconds());
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
},
tishiFun(text){
const that = this;
this.tishiPop = true;
this.tishiText = text;
clearInterval(this.timer);
this.timer = setInterval(()=>{
that.tishiPop = false;
clearInterval(that.timer);
}, 1500);
}
},
computed: {
addStartDate:function () { //当前时间 转 2021-10-27 20:18:57 这种格式
const date = new Date();
const year = date.getFullYear();
const month = padDate(date.getMonth() + 1);
const day = padDate(date.getDate());
const hours = padDate(date.getHours());
const minutes = padDate(date.getMinutes());
const seconds = padDate(date.getSeconds());
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
},
addEndDate:function () {
let dateNew = (new Date().getTime());
let publicityTime = window.sessionStorage.getItem('publicityTime');
if(publicityTime == null || publicityTime == undefined || publicityTime == 0){
publicityTime = 5*24*60*60*1000; //公示时间默认五天
}else{
publicityTime = parseInt(publicityTime);
}
let EndTime = dateNew + publicityTime;
return this.toData(EndTime);
}
},
created(){
},
mounted() {
}
}
</script>
<style scoped>
@import "../assets/css/addProduct.css";
</style>
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
页面
image.png
image.png
提交给后台的格式
image.png
