<!-- 多图模式 --> <el-upload :action="`${this.__API__}/index/base/upload`" list-type="picture-card" multiple accept=".jpg,.jpeg,.png,.gif" :on-success="{{_object_}}_success" :on-preview="upload_image_prev" :on-remove="{{_object_}}_remove" :file-list="{{_object_}}_files"> <i class="el-icon-plus"></i> </el-upload> <!-- 单图模式 --> <el-upload :action="`${this.__API__}/index/base/upload`" list-type="picture-card" :limit="1" accept=".jpg,.jpeg,.png,.gif" :on-success="{{_object_}}_success" :on-preview="upload_image_prev" :on-remove="{{_object_}}_remove" :file-list="{{_object_}}_files"> <i class="el-icon-plus"></i> </el-upload> <!-- 上传图预览使用（多个上传组件只要一个） --> <el-dialog :visible.sync="upload_image_prev_show" :modal="false"> <image :src="upload_image_prev_src" style="width:800px;display:block;" mode="widthFix"></image> </el-dialog>
data() { return { {{_object_}}_files: [], // 上传图预览使用（多个上传组件只要一个） upload_image_prev_show: false, upload_image_prev_src: '' } } // 上传图预览使用（多个上传组件只要一个） upload_image_prev(file) { this.upload_image_prev_show = true this.upload_image_prev_src = file.url }, {{_object_}}_success(response, file, filelist) { this.form.{{_object_}}.push({ name: file.name, path: file.response.data.file }) }, {{_object_}}_remove(file, filelist) { for (let i in this.form.{{_object_}}) { if (file.name == this.form.{{_object_}}[i].name) { this.form.{{_object_}}.splice(i, 1); } } },
// 提交时将object数据转为json字符串 if (typeof this.form.{{_object_}} == 'object') { this.form.{{_object_}} = JSON.stringify(this.form.{{_object_}}) } // 编辑模式设置默认值 if (res.data.data.{{_object_}}.length > 0) { for (let i in res.data.data.{{_object_}}) { let v = res.data.data.{{_object_}}[i] this.{{_object_}}_files.push({ name: v.name, url: this.__API__ + '/storage/' + v.path }) } }
<!-- 后端 --> 1、注意后端检查数据库字段类型是不是text型<br> 2、列表数据处理：$lists[$k]['{{_object_}}'] = $v['{{_object_}}'] ? json_decode($v['{{_object_}}'], true) : []; 3、详情数据处理：$data['{{_object_}}'] = $data['{{_object_}}'] ? json_decode($data['{{_object_}}'], true) : [];