Minimalist UI

Upload 上传

引入组件

<template>
  <m-upload
    action="https://img-node-server.herokuapp.com/upload" name="avatar"
    :default-file-list="fileList">
    <m-button>点击上传</m-button>
    <template v-slot:tips>
      示例代码中的上传地址在heroku上，所以需要科学上网才能上传成功
    </template>
  </m-upload>
</template>

<script>
  import { MUpload } from "@csr/m_ui";

  export default {
    components: {
      MUpload
    },
    data() {
      return {
        fileList: [
          {name: 'avatar0.jpg', url: 'http://img1.imgtn.bdimg.com/it/u=2627188576,3710023153&fm=26&gp=0.jpg'},
          {name: 'avatar1.jpg', url: 'http://img4.imgtn.bdimg.com/it/u=1142211080,3689420364&fm=15&gp=0.jpg'}
        ]
      }
    }
  }
</script>

基础用法

点击上传
代码
<m-upload
  action="https://img-node-server.herokuapp.com/upload" name="avatar"
  :default-file-list="fileList">
  <m-button>点击上传</m-button>
  <template v-slot:tips>
    示例代码中的上传服务部署在heroku上，所以需要科学上网才能上传成功
  </template>
</m-upload>

<script>
  export default {
    data() {
      return {
        fileList: [
          {name: 'avatar0.jpg', url: 'http://img1.imgtn.bdimg.com/it/u=2627188576,3710023153&fm=26&gp=0.jpg'},
          {name: 'avatar1.jpg', url: 'http://img4.imgtn.bdimg.com/it/u=1142211080,3689420364&fm=15&gp=0.jpg'}
        ]
      }
    }
  }
</script>

缩略图模式

点击上传
代码
<m-upload
  action="https://img-node-server.herokuapp.com/upload" name="avatar"
  :default-file-list="fileList" list-type="picture">
  <m-button>点击上传</m-button>
  <template v-slot:tips>
    示例代码中的上传服务部署在heroku上，所以需要科学上网才能上传成功
  </template>
</m-upload>

<script>
  export default {
    data() {
      return {
        fileList: [
          {name: 'avatar0.jpg', url: 'http://img1.imgtn.bdimg.com/it/u=2627188576,3710023153&fm=26&gp=0.jpg'},
          {name: 'avatar1.jpg', url: 'http://img4.imgtn.bdimg.com/it/u=1142211080,3689420364&fm=15&gp=0.jpg'}
        ]
      }
    }
  }
</script>

卡片模式

点击上传
代码
<m-upload
  action="https://img-node-server.herokuapp.com/upload" name="avatar"
  :default-file-list="fileList" list-type="card">
  <m-button>点击上传</m-button>
  <template v-slot:tips>
    示例代码中的上传服务部署在heroku上，所以需要科学上网才能上传成功
  </template>
</m-upload>

<script>
  export default {
    data() {
      return {
        fileList: [
          {name: 'avatar0.jpg', url: 'http://img1.imgtn.bdimg.com/it/u=2627188576,3710023153&fm=26&gp=0.jpg'},
          {name: 'avatar1.jpg', url: 'http://img4.imgtn.bdimg.com/it/u=1142211080,3689420364&fm=15&gp=0.jpg'}
        ]
      }
    }
  }
</script>

手动上传

选择图片
代码
<m-upload
  action="https://img-node-server.herokuapp.com/upload" name="avatar"
  :default-file-list="fileList" :auto-upload="false">
  <m-button>选择图片</m-button>
  <template v-slot:tips>
    示例代码中的上传服务部署在heroku上，所以需要科学上网才能上传成功
  </template>
  <template v-slot:submit="slotProps">
    <div class="manual-upload">
      <m-button @click="slotProps.submit">手动上传</m-button>
    </div>
  </template>
</m-upload>

<script>
  export default {
    data() {
      return {
        fileList: [
          {name: 'avatar0.jpg', url: 'http://img1.imgtn.bdimg.com/it/u=2627188576,3710023153&fm=26&gp=0.jpg'},
          {name: 'avatar1.jpg', url: 'http://img4.imgtn.bdimg.com/it/u=1142211080,3689420364&fm=15&gp=0.jpg'}
        ]
      }
    }
  }
</script>

拖拽上传

拖拽上传
代码
<m-upload
  action="https://img-node-server.herokuapp.com/upload" name="avatar"
  :default-file-list="fileList">
  <div class="upload-box">
    拖拽上传
  </div>
  <template v-slot:tips>
    示例代码中的上传服务部署在heroku上，所以需要科学上网才能上传成功
  </template>
</m-upload>

<script>
  export default {
    data() {
      return {
        fileList: [
          {name: 'avatar0.jpg', url: 'http://img1.imgtn.bdimg.com/it/u=2627188576,3710023153&fm=26&gp=0.jpg'},
          {name: 'avatar1.jpg', url: 'http://img4.imgtn.bdimg.com/it/u=1142211080,3689420364&fm=15&gp=0.jpg'}
        ]
      }
    }
  }
</script>

API

属性说明类型默认值
action 图片上传服务器地址，必传 string
name 上传文件时的名称，作用和input控件中的name属性相同，必传 string
method 上传文件时请求方法 string POST
auto-upload 是否开启自动上传 boolean true
multiple 是否开启多选 boolean false
accept 限制允许的文件类型，详情查看： input type="file" string
default-file-list 默认展示的文件，该数组中的每一项必须包含以下属性：{ name: 'xxx', url: 'xxx'} array
before-remove 文件删除之前的钩子，参数为(file: 删除的文件, fileList: 当前的文件列表) function
before-upload 文件上传之前的钩子，参数为参数为(file: 上传的文件, fileList: 当前的文件列表)， 若返回 false 或者返回 Promise 且被 reject，则停止上传。 function
headers 设置上传的请求头部 object
with-credentials 上传请求时是否携带 cookie object
list-type 文件列表展示类型，可选值：picture（缩略图模式），card（卡片模式） string
size 上传文件大小，单位KB number
limit 最大允许上传个数 number
visible-file-list 是否展示文件列表 boolean true

事件

事件名 说明 回调参数
on-drop 将文件拖拽至上传区域后触发 (file: 当前拖拽文件)
selected-files 选择完文件后触发 (files: 选择的文件)
on-remove 文件删除后触发 (file: 删除的文件, fileList: 当前文件列表)
on-preview 点击文件列表文件时触发 (file: 点击的文件, fileList: 当前文件列表)
on-exceeded-size 上传文件大小超过指定大小时触发 (file: 超过指定大小的文件, fileList: 当前文件列表)
on-exceeded 上传文件数量超出指定数量时触发 (file: 当前上传文件, fileList: 当前文件列表)
on-success 文件上传成功时触发 (res: 服务器返回的数据，file: 上传成功的文件, fileList: 当前文件列表)
on-error 文件上传失败时触发 (err: 错误原因，file: 上传失败的文件, fileList: 当前文件列表)
on-progress 文件上传时触发，支持 XMLHttp​Request​.upload 的浏览器才会触发 (file: 上传的文件, fileList: 当前文件列表)

submit slot

submit 插槽是一个带有slot-scope 特性的插槽，接收的 prop 对象中提供 submit方法用于上传文件。

← Sticky 粘性定位 →