Jst UI

# Upload 上传

上传文件组件

# 基础使用

这是个提示消息

    设置url上传文件的地址，此参数必填。

    <j-upload
  url="https://jsonplaceholder.typicode.com/posts/">
  <p slot="tip">
    这是个提示消息
  </p>
</j-upload>
    显示代码 复制代码

    # 图片上传

    设置type 为 picture 开起图片上传

    单选：

    选择你喜欢的照片

    多选：

    多选

    可通过 multiple 开启多图上传功能，单图上传加只在上传头像前展示。

    <j-row>
  <j-col :span="12">
    <p>单选：</p>
    <j-upload
      :pic-style="{'width':'130px','height':'130px'}"
      type="picture"
      url="https://jsonplaceholder.typicode.com/posts/">
      <div slot="tip">
        选择你喜欢的照片
      </div>
    </j-upload>
  </j-col>
  <j-col :span="12">
    <p>多选：</p>
    <j-upload
      type="picture"
      multiple
      url="https://jsonplaceholder.typicode.com/posts/">
      <span slot="tip">
        多选
      </span>
    </j-upload>
  </j-col>
</j-row>
    显示代码 复制代码

    # 限制上传类型

    使用 before-upload 限制用户上传的图片格式和大小。。

      
<j-upload
  url="https://jsonplaceholder.typicode.com/posts/"
  :on-upload="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
</j-upload>
<img :src="imageUrl" />
<script>
  export default {
    data() {
      return {
        imageUrl:''
      };
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          alert('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          alert('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
  }
</script>
      显示代码 复制代码

      # 手动上传

      设置 auto-upload 为 false ,并调用upload的submit方法

        <j-upload
  ref="upload"
  url="https://jsonplaceholder.typicode.com/posts/"
  :auto-upload="false">
</j-upload>
<j-button class="success" @click="submitUpload">上传到服务器</j-button>
<script>
  export default {
    data() {
      return {
        fileList: []
      };
    },
    methods: {
      submitUpload() {
        this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      }
    }
  }
</script>
        显示代码 复制代码

        # Attribute

        参数 说明 类型 可选值 默认值
        url 必选参数，上传的地址 string — —
        type 上传控件类型 string picture —
        pic-style 当type为picture时，可通过pic-style附加样式 Object — —
        headers 设置上传的请求头部 object — —
        multiple 是否支持多选文件 boolean — —
        data 上传时附带的额外参数 object — —
        name 上传的文件字段名 string — file
        with-credentials 支持发送 cookie 凭证信息 boolean — false
        show-file-list 是否显示已上传文件列表 boolean — true
        accept 接受上传的文件类型 (opens new window)（thumbnail-mode 模式下此参数无效） string — —
        on-preview 点击文件列表中已上传的文件时的钩子 function(file) — —
        on-remove 文件列表移除文件时的钩子 function(file, fileList) — —
        on-upload 文件上传后的钩子 function(file, fileList) — —
        on-progress 文件上传时的钩子 function(event, file, fileList) — —
        on-error 文件上传失败时的钩子 function(request, file) — —
        on-change 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 function(file, fileList) — —
        before-upload 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 function(file) — —
        before-remove 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。 function(file, fileList) — —
        http-request 覆盖默认的上传行为，实现自定义上传 function - -
        list-type 文件列表的类型 string text/picture/picture-card text
        auto-upload 是否在选取文件后立即进行上传 boolean — true
        file-list 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] array — []
        disabled 是否禁用 boolean — false
        limit 最大允许上传个数 number — —
        on-exceed 文件超出个数限制时的钩子 function(files, fileList) — -

        # Slot

        name 说明
        tip 提示说明文字

        # Methods

        方法名 说明 参数
        clearFiles 清空已上传的文件列表（该方法不支持在 before-upload 中调用） —
        abort 取消上传请求 （ file: fileList 中的 file 对象 ）
        submit 手动上传文件列表 —

        ← TimePicker 时间选择器 →