Form 模块

上传

附件上传 - 图1

有upload-after和upload-before方法来拦截请求的，返回数据和 done 方法,其中 propsHttp 配置图片服务器返回的url图片地址和name图片名称属性，props配置回显的label图片名称和value图片地址。可以根据 dataType 设置是array还是json

  1. <avue-form
  2.   v-model="form"
  3.   :option="option"
  4.   @submit="submit"
  5.   :upload-before="uploadBefore"
  6.   :upload-after="uploadAfter"
  7. ></avue-form>
  9. <script>
  10.   export default {
  11.     data() {
  12.       return {
  13.         form: {
  14.           img: [
  15.             'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?a=1',
  16.             'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?a=2'
  17.           ],
  18.           string:
  19.             'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?a=1,https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?a=2',
  20.           imgUrl: [
  21.             {
  22.               label: '图片名称',
  23.               value:
  24.                 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?a=1'
  25.             },
  26.             {
  27.               label: '图片名称',
  28.               value:
  29.                 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?a=2'
  30.             }
  31.           ],
  32.           imgUrl3:
  33.             'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?a=3'
  34.         },
  35.         option: {
  36.           labelWidth: 120,
  37.           column: [
  38.             {
  39.               label: '附件上传',
  40.               prop: 'imgUrl',
  41.               type: 'upload',
  42.               loadText: '附件上传中，请稍等',
  43.               span: 24,
  44.               propsHttp: {
  45.                 name: 'label',
  46.                 url: 'value'
  47.               },
  48.               props: {
  49.                 label: 'label',
  50.                 value: 'value'
  51.               },
  52.               tip: '只能上传jpg/png文件，且不超过500kb',
  53.               action: 'https://jsonplaceholder.typicode.com/posts/'
  54.             },
  55.             {
  56.               label: '用户头像',
  57.               prop: 'imgUrl3',
  58.               type: 'upload',
  59.               showFileList: false,
  60.               listType: 'picture-img',
  61.               span: 24,
  62.               tip: '只能上传jpg/png用户头像，且不超过500kb',
  63.               action: 'https://jsonplaceholder.typicode.com/posts/'
  64.             },
  65.             {
  66.               label: '照片墙',
  67.               prop: 'imgUrl',
  68.               type: 'upload',
  69.               span: 24,
  70.               listType: 'picture-card',
  71.               tip: '只能上传jpg/png文件，且不超过500kb',
  72.               action: 'https://jsonplaceholder.typicode.com/posts/'
  73.             },
  74.             {
  75.               label: '数组图片组',
  76.               prop: 'img',
  77.               dataType: 'array',
  78.               type: 'upload',
  79.               span: 24,
  80.               listType: 'picture-card',
  81.               tip: '只能上传jpg/png文件，且不超过500kb',
  82.               action: 'https://jsonplaceholder.typicode.com/posts/'
  83.             },
  84.             {
  85.               label: '字符串图片组',
  86.               prop: 'string',
  87.               dataType: 'string',
  88.               type: 'upload',
  89.               span: 24,
  90.               listType: 'picture-card',
  91.               tip: '只能上传jpg/png文件，且不超过500kb',
  92.               action: 'https://jsonplaceholder.typicode.com/posts/'
  93.             },
  94.             {
  95.               label: '拖拽上传',
  96.               prop: 'imgUrl',
  97.               type: 'upload',
  98.               span: 24,
  99.               drag: true,
  100.               tip: '只能上传jpg/png文件，且不超过500kb',
  101.               action: 'https://jsonplaceholder.typicode.com/posts/'
  102.             },
  103.             {
  104.               label: '缩略图上传',
  105.               prop: 'imgUrl',
  106.               type: 'upload',
  107.               limit: 3,
  108.               span: 24,
  109.               listType: 'picture',
  110.               tip: '只能上传jpg/png文件，且不超过500kb',
  111.               action: 'https://jsonplaceholder.typicode.com/posts/' //上传图片地址
  112.             }
  113.           ]
  114.         }
  115.       }
  116.     },
  117.     methods: {
  118.       uploadBefore(file, done, loading) {
  119.         console.log(file)
  120.         done()
  121.         this.$message.success('上传前的方法')
  122.       },
  123.       uploadAfter(res, done, loading) {
  124.         console.log(res)
  125.         done()
  126.         this.$message.success('上传后的方法')
  127.       },
  128.       submit() {
  129.         this.$message.success('当前数据' + JSON.stringify(this.form))
  130.       }
  131.     }
  132.   }
  133. </script>

附件上传讲解

Avue-upload Option Attributes

参数说明类型可选值默认值
propsHttp上传后返 ajax 回名称和路径的配置属性，详情见下面 propsHttp 属性Object--
props回显的名称和路径配置属性，详情见下面 props 属性Object--
dataType图片格式的类型，默认为 jsonStringarray / json / stringjson
listType上传框的类型Stringpicture-img / picture-card / picture / filefile
action上传图片的地址String--
tip上传控件的提示语String-文件上传中,请稍等
limit最大上传个数Number-3
showFileList文件列表(当为 picture-img 和 picture-card 时默认为 false)Booleanfalse / truetrue
loadText上传提示语String--

Avue-upload props Attributes

参数说明类型可选值默认值
label回显图片的名称string——
value图片的地址string——

Avue-upload propsHttp Attributes

参数说明类型可选值默认值
name回显图片的名称string——
url图片的地址string——

Avue-upload Events

事件名说明参数
upload-before上传前的回调file,done（继续下面的操作）,loading（关闭等待框，终止下面的操作）
upload-after上传后的回调res,done（继续下面的操作）,loading（关闭等待框，终止下面的操作）