Upload 上传

agel-upload 组件是基于 el-upload 组件的二次封装组件

使用

组件会根据 listType drag 属性展示不同的默认插槽。

preview 属性提供了基础的文件预览功能（图片，音频，视频，office文件，需要this.$msgbox 挂载 el-messagebox 实例。

message 属性在上传错误，文件大小，文件个数超出限制时，会触发默认提示语，需要 this.$message 挂载 el-message 实例。

limitHide 属性会在超出文件限制后隐藏上传按钮，通常使用在类型为 picture-card 的上传组件中。

与 el-upload 唯一不同的是，在 onSuccess 钩子函数中需返回一个包含 name，url 的特定对象，如： {name:"xx.jpg",url:'http://xxx.jpg}，这样才能在能保证在上传成功后正确回填到表单。

点击查看代码

<template>
  <div class="demo border">
    <agel-upload v-model="value" action="api/xxx/upload" list-type="picture-card" :on-success="onSuccess"></agel-upload>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      value: [
        {
          name: "这是一个图片文件.png",
          url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        },
      ],
    };
  },
  methods: {
    onSuccess(res) {
      return { name: res.data.name, url: res.data.url };
    },
  },
};
</script>

演示

点击查看代码

<template>
  <agel-form v-model="form" class="demo border"></agel-form>
</template>
 
<script>
export default {
  name: "upload-form",
  data() {
    return {
      form: {
        labelWidth: "100px",
        span: 18,
        data: {
          files1: [
            {
              name: "这是一个图片文件.jpeg",
              url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            },
            {
              name: "这是一个视频文件.mp4",
              url: "https://www.runoob.com/try/demo_source/movie.mp4",
            },
            {
              name: "这是一个音频文件.mp3",
              url: "https://www.runoob.com/try/demo_source/horse.mp3",
            },
            {
              name: "这是一个docx文件.docx",
              url: "https://view.xdocin.com/doc/preview.docx",
            },
            {
              name: "这是一个不可预览文件.zip",
              url: "/xxx.zip",
            },
            {
              name: "这是一个没有预览弹窗文件.png",
              url: "",
            },
          ],
          // v.0.3.37 更新，支持 string类型的 value
          files2:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          files3: [
            {
              url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            },
          ],
        },
        items: {
          files1: {
            label: "默认样式",
            component: "el-upload",
            action: "/xxx/upload",
            tip: "点击 file list 查看预览样式,且最大只能上传 10kb 大小",
            limitSize: 10,
            preview: (file) => (file.url ? true : false),
            onSuccess: (res) => {
              // 需要 return 一个包含 name，url 的对象 {name:"xx.jpg",url:'http://xxx.jpg}
              return { name: res.data.fileName, url: res.data.fileUrl };
            },
            onRemove: (file, filelist) => {
              console.log(file, filelist);
            },
          },
          files2: {
            label: "picture-card 样式",
            component: "el-upload",
            action: "/xxx/upload",
            listType: "picture-card",
            limit: 1,
            limitHide: true, // 超出允许上传个数，隐藏上传按钮
            tip: "最大只能上传一个，超出自动隐藏上传按钮",
            onSuccess: (res) => {
              //  v.0.3.37 更新，支持 string类型的 value
              return res.data.fileUrl;
            },
          },
          files3: {
            label: "picture 样式",
            component: "el-upload",
            action: "/xxx/upload",
            listType: "picture",
          },
          files4: {
            label: "拖拽样式",
            component: "el-upload",
            action: "/xxx/upload",
            drag: true,
          },
          files5: {
            label: "手动上传",
            component: "el-upload",
            action: "/xxx/upload",
            autoUpload: false,
            slots: {
              trigger: () => {
                return <el-button>自定义选取文件</el-button>;
              },
              default: () => {
                return (
                  <el-button
                    style="margin-left:10px"
                    onClick={() => this.form.getRef("files5").submit()}
                  >
                    自定义上传到服务器
                  </el-button>
                );
              },
            },
          },
        },
      },
    };
  },
};
</script>

Upload Attributes

属性	类型	默认值	说明
value	Array/String	[]	附件列表，[{name,url}] / url
drag	Boolean	false	是否开启拖拽
tip	String	-	提示语
limitSize	Number	-	文件大小限制,单位kb
limitHide	Boolean	false	超出允许上传个数隐藏上传按钮
preview	Boolean/Funciton	true	是否开启文件预览
message	Boolean	true	是否开启钩子函数的默认提示
onSuccess	Funciton	-	需返回一个包含 {name,url} 的对象
......	......	.........	el-upload 属性 (opens new window)

Upload slots

属性	说明
default	默认插槽
trigger	触发文件选择框的内容
tip	提示说明文字

Upload Methods

属性	参数	说明
submit	-	手动上传文件列表
abort	-	取消上传请求

Upload Events

属性	参数	说明
......	......	el-upload 事件 (opens new window)