要注意的是:
: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);
}