vue3 + element-UI + Tp6 多图片上传功能

Upload 上传 | Element Plus

 要注意的是：

:file-list = 返回的格式是

---

数据库字段设计

内容是用 “，” 分割开来存储的！

 

 

前端

        <el-form-item :label-width="labelWidth" label="测试图片" prop="league_img">
            <el-upload
              list-type="picture-card" // 列表展示格式(卡片)
              :action="uploadLeagueImg" // 后端上传图片方法
              :file-list="formData.league_img" //父页面传过来的图片值
              :on-success="handleImgSuccess" // 上传成功后的方法
              multiple // 可多选
              :headers="headers" // 请求头信息
            ></el-upload>
          </el-form-item>

import { cloneDeep } from 'lodash'; // 使用深拷贝

const handleEditClick = async formEl => {
  // 深拷贝
  const data = cloneDeep(formData.value);

  // 把上传接口返回回来的data 给到 formData.value.league_img
  data.league_img = data.league_img.map(v => {
    if (v.response) {
      return v.response.data;
    }
    return v.url;
  });

  // 表单认证
  if (!formEl) return;
  formEl.validate(async valid => {
    if (!valid) {
      return;
    }
    // 提交接口
    const { code } = await editLeague(data);
    if (code == 0) {
      closeDialog();
      props.done();
    }
  });
};

后端

PHP：模型层 

     //字段(图片)获取器
     public function getLeagueImgAttr($value)
     {
          if (!$value) return [];
                 $data = [];
                 foreach (explode(',', $value) as $value) {
                     $data[] = ['url' => $value];
                 }
                 return $data;
     }

    //字段(图片)修改器
    public function setLeagueImgAttr($value)
    {
        return implode(',', $value);
    }