dt-vui v0.0.4

dt-vui

Vue Json upload for Vue.

Installation

NPM

npm install dt-vui

Issue

新增组件需求 或是 bug 请提交到 luotao_t@yeah.net

Mount

global

import Vue from 'vue'
import dtVui from 'dt-vui'

// you can set default global options and events when use
Vue.use(dtVui)

local

import { Upload } from 'dt-vui'

export default {
  components: {
    Upload
  }
}

默认上传

// 文件上传
<upload v-model="file" :maxCount="1" :beforeRead="beforeRead" :onPreview="onPreview"></upload>
<script>
  data() {
    return {
      files: [{ url: '....' }]
    }
  },
  methods: {
    beforeRead(files) {
      // 这一在这里做一些上传前的校验
    }，
    onPreview(file, index) {
      // 在这里返回文件对象  自己实现UI弹出层 将file对象里的 url 或者 content 赋值给弹出层的 img
    }
  }
</script>

上传状态

// 文件上传
<upload v-model="file" :maxCount="1" :afterRead="afterRead"></upload>
<script>
  data() {
    return {
      files: [{ url: '....' }]
    }
  },
  methods: {
    afterRead(files) {
      files.status = "loading";
      files.message = "上传中...";
      let formData = new FormData();
      formData.append("file", files.file);
      http("url", formData)
        .then(res => {
          files.status = "success";
        })
        .catch((err) => {
          files.status = "error";
          files.message = "上传失败";
        });
      }
    }
  }
</script>

api

Attributes

Event

Methods