在项目中使用avue crud组件，其中用到了upload组件。

官网中关于upload的解释非常简单，需要仔细阅读参数配置含义。

给出示例：

表banner(轮播横幅图表)使用avue进行CRUD操作。

export const tableOption = {
  "border": true,
  "index": true,
  "indexLabel": "序号",
  "stripe": true,
  "menuAlign": "center",
  "align": "center",
  "searchMenuSpan": 6,
  "column": [
    {
      "type": "input",
      "label": "id",
      "prop": "id",
      "addDisplay": false,
      "editDisabled": true,
      "hide": true
    }, {
      "type": "input",
      "label": "轮播标题",
      "prop": "title",
      "overHidden": true,
      "rules": [{
        "required": true,
        "message": '请输入轮播标题',
        "trigger": 'blur'
      }]
    }, {
      "type": "input",
      "label": "轮播描述",
      "prop": "summary",
      "overHidden": true
    }, {
      "type": "upload",
      "label": "封面图片",
      "prop": "imageUrl",
      "span": 24,
      "data": {
        "folder": "banner"
      },
      "propsHttp": {
        "res": 'data',
        "name": "fileName",
        "url": "fileUrl",
        "fileName": "attach"
      },
      "dataType": "string",
      "loadText": '封面上传中，请稍等',
      "action": "/portal/common/local/attach/upload",
      "tip": '上传封面'
    }, {
      "type": "input",
      "label": "轮播状态",
      "prop": "status"
    }, {
      "type": "input",
      "label": "轮播类型",
      "prop": "functionCode"
    }, {
      "type": "number",
      "label": "序号",
      "prop": "seqNum"
    }, {
      "type": "input",
      "label": "创建人",
      "prop": "createdBy",
      "addDisplay": false,
      "editDisabled": true,
      "hide": true
    }, {
      "type": "input",
      "label": "创建时间",
      "prop": "createdDate",
      "addDisplay": false,
      "editDisabled": true,
      "hide": true
    }, {
      "type": "input",
      "label": "修改人",
      "prop": "lastModifiedBy",
      "addDisplay": false,
      "editDisabled": true,
      "hide": true
    }, {
      "type": "input",
      "label": "修改时间",
      "prop": "lastModifiedDate",
      "addDisplay": false,
      "editDisabled": true,
      "hide": true
    }, {
      "type": "input",
      "label": "乐观锁",
      "prop": "version",
      "addDisplay": false,
      "editDisabled": true,
      "hide": true
    }]
}

其中imageUrl字段需要完成封面上传功能，给出关键代码：

{
      "type": "upload",
      "label": "封面图片",
      "prop": "imageUrl",
      "span": 24,
      // 指定额外参数
      "data": {
        "folder": "banner"
      },
      "propsHttp": {
        "res": 'data',        // 解析上传完成返回的responseJSON中的字段
        "name": "fileName",   // 解析responseJSON中的data.fileName为文件名
        "url": "fileUrl",     // 解析responseJSON中的data.fileUrl为图片路径
        "fileName": "attach"  // 指定上传的文件参数为attach,默认使用file接收文件
      },
      "dataType": "string",   // 后台Banner.imageUrl为字符串类型，默认为JSON类型(imageUrl为对象类型带label和value)!
      "loadText": '封面上传中，请稍等',
      "action": "/portal/common/local/attach/upload",// 上传的路径
      "tip": '上传封面'
}

 注意：propsHttp.home 默认不配置将直接访问对应fileUrl，如果文件保存在另一台服务器（域名）可指定home值，avue将会请求home+fileUrl图片路径。

CRUD 新增：支持在线预览功能。

  保存完成后显示的get记录：支持默认显示图片，点击图片直接支持预览。

记录修改：

 OK，效果完成。下一篇文章将会讲CRUD集成富文本编辑器。

希望对各位看官有帮助。