美文网首页
element-ui 上传多张图片

element-ui 上传多张图片

作者: __鹿__ | 来源:发表于2021-11-04 09:58 被阅读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

    相关文章

      网友评论

          本文标题:element-ui 上传多张图片

          本文链接:https://www.haomeiwen.com/subject/yjqenltx.html