el-upload上传多张图片

在这里插入图片描述

        <el-form-item label="图片" :rules="createRules.strRequired" >
          <el-upload
            class="upload-demo"
            ref="upload"
            multiple
            :on-preview="handlePictureCardPreview"
            :on-change="handlePicChange"
            :before-upload="beforeAvatarUpload"
            action="/admin/uploads/posts?type=1"
            :on-remove="handleRemove"
            :file-list="fileListPic"
            limit="5"
            :auto-upload="true"
            :on-exceed="handleExceedPic"
            accept=".jpg,.jpeg,.png"
            list-type="picture">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <div slot="tip" class="el-upload__tip">只能上传最多五个jpg/png文件,且单个文件不超过1M</div>
          </el-upload>
        </el-form-item>
return {
        fileListPic:[],
   
},
methods: {
      //图片
      handlePicChange(file, fileList){
        this.fileListPic = fileList;
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
            beforeAvatarUpload(file) {
        var isJPG;
        if (!/image\/(jpeg|png)/.test(file.type)) {
          alert('只能上传.jpg, .png格式的图片!');
          return;
        } else {
          isJPG = true;
        }

        const isLt3M = file.size / 1024 / 1024 < 1;
        if (!isLt3M) {
          this.$message.error('上传图片大小不能超过 1MB!');
        }
        return isJPG && isLt3M;
      },

      handleExceedPic() {
        this.$notify({
          title: '警告',
          message: '最多只能上传五个图片',
          type: 'warning'
        });
      },
      
	 handleRemove(){
	 
	 },

      // 提交维护工序信息
      submitForm(formName) {
        let self = this;
        if (self.fileListPic == null || self.fileListPic == [] || self.fileListPic.length==0) {
          self.$message.error('请上传图片');
          return false;
        }
        var data = self.createForm;
        var tmpPic = []
        var tmpVid = []
        this.fileListPic.forEach((file) => {
          tmpPic.push(file.response.url);
        });
        this.fileListVid.forEach((file) => {
          tmpVid.push(file.response.url);
        });
        data['pic_url'] = tmpPic;
        data['video_url'] = tmpVid;
        data['status'] = self.status;
        self.$refs[formName].validate((valid) => {
          if (valid) {
            let params = {
              '_token': LA.token,
              'data': data,
            };
            $.ajax({
              url: "/admin/processbase/store",
              type: "POST",
              data: params,
              dataType: 'json',
              beforeSend: function (res) {
                self.fullscreenLoading = true;
              },
              success: function (res) {
                self.$notify({
                  title: res.title,
                  message: res.message,
                  type: res.type
                });
                if (res.code == 100) {
                  self.fullscreenLoading = false;
                  self.dialogCreateVisible = false;
                  self.fileListPic = [];
                  self.fileListVid = [];
                  self.getData();
                }
              },
              error: function () {
                self.fullscreenLoading = false;
              }
            });
          } else {
            self.$notify({
              title: '警告',
              message: '填写的工序信息有误!!',
              type: 'warning'
            });
            self.fullscreenLoading = false;
          }

        });
      },

      //停用
      handleDelete(row) {
        let that = this;
        let list_id = row.id
        if (list_id) {
          that.$confirm('确认要停用?', '停用后不可恢复!', {
            confirmButtonText: '确认停用',
            cancelButtonText: '取消',
            type: 'success',
            callback: action => {
              if (action === 'confirm') {
                var data = {
                  '_token': LA.token,
                  'id': list_id,
                };
                $.ajax({
                  url: "/admin/processbase/delete",
                  type: "DELETE",
                  data: data,
                  dataType: 'json',
                  success: function (data) {
                    that.$notify({
                      title: '停用',
                      message: data.message,
                      type: data.type
                    });
                    //刷新数据
                    that.tableData = that.tableData.filter((sr) => {
                      if (sr != row) {
                        return sr;
                      }
                    });
                  }
                });
              }
            }
          })
        }
      },


}

//文件上传
action=“/admin/uploads/posts?type=1”

    //文件上传
    public static function upload_ajax_file(Request $request){
        $type = $request->type;
        if (!empty($request->file)){
            $tmp = $request->file;
            if($type == 1){
                $path = 'processimg/'; //工序图片
            }
            elseif($type == 2){
                $path = 'video/';  //视频
            }
            elseif($type == 3){
                $path = 'placeimgs/'; //品名图片
            }
            else{
                $path = getDateH(1);
            }

            if ($tmp->isValid()) { //判断文件上传是否有效
                $FileType = $tmp->getClientOriginalExtension(); //获取文件后缀
                $FilePath = $tmp->getRealPath(); //获取文件临时存放位置
                //$FileName = $path.date('Y-m-d') .'/'. uniqid() . '.' . $FileType; //定义文件名
                $FileName = $path. uniqid() . '.' . $FileType; //定义文件名
                Storage::disk('admin')->put($FileName, file_get_contents($FilePath)); //存储文件
                $url  = '/uploads/'.$FileName;
                return response()->json(['status' => 200, 'url' => $url,'message' => '文件上传完成', 'type' => 'success']);
            }
        }
    }
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值