@sixi/upload NPM

upload 上传

upload是将信息（网页、文字、图片、视频等）通过网页发布到七牛云存储服务器上的组件。同时整合图片预览、视频播放、列表文件选择功能。

代码演示

最基础的文件上传

<template>
  <div>
    <el-form :model="formData" label-width="80px">
      <el-form-item label="文件">
        <upload
          :token="token.video"
          :domain="domain"
          :maxSize="2"
          :mustExt="['png', 'jpg']"
          @change="onUploadChange"
          @error="onUploadError">
        </upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data () {
    return {
      formData: {
      },
      domain: 'https://forum01.jiaoliuqu.com/',
      token: undefined
    }
  },
  mounted () {
    this.getUploadToken('forum', 1, '1')
  },
  methods: {
  	getUploadToken (bucket, isWater, appCode) {
    	// ... 获取上传token
    },
    // 上传错误处理  
    onUploadError (msg) {
      this.$message.error(msg)
    },
    // 上传结果接收  
    onUploadChange (files, checked) {
      console.log(files, checked)
    },
  }  
}
</script>

用于编辑的表单时，我们上传文件可能有默认的数据，可以通过defaultList 属性传入默认已上传的文件，这里要注意defaultList 是一个数组， defaultList 拥有以下属性：

属性	说明	类型	是否必需/ 默认值
key	取消按钮文字	String	是
width	确认按钮文字	Number	否，默认0
height	标题	Number	否，默认0
duration	(声音，视频)时长	Number	否，默认0
size	资源大小	Number	否，默认0

下面是一个带默认值的例子：

<template>
  <div>
    <el-form :model="formData" label-width="80px">
      <el-form-item label="文件">
        <upload
          :token="token.video"
          :domain="domain"
          sortable
          multiple
          multipleChooice
          :maxSize="2"
          :mustExt="['png', 'jpg']"
          @change="onUploadChange"
          @error="onUploadError"
          :defaultList="images"
          :selected="cover"
          selectLabel="附件"
          selectable>
        </upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import SoaClient from '@/lib/SoaClient'
export default {
  data () {
    return {
      formData: {
      },
      domain: 'https://forum01.jiaoliuqu.com/',
      token: {
        forum: undefined,
      },
      images: [
        { key: '215735410480009464.png', width: 800, height: 600 },
        { key: '215735410480009464.png', width: 800, height: 600 }
      ],
      cover: ['215735410480009464.png', '015735410950009081.png']
    }
  },
  mounted () {
    this.getUploadToken('forum', 1, '1')
  },
  methods: {
    onSubmit () {
      console.log('submit!')
    },
    onUploadError (msg) {
      this.$message.error(msg)
    },
    onUploadChange (files, selected) {
      console.log(files, selected)
    },
    getUploadToken (bucket, isWater, appCode) {
      // ...
    }
  }
}
</script>

listType 决定了上传后的展示类型以及文件上传的类型：

默认listType="file"时, 类型只受mustExt参数限定, 效果如下：

当listType="img"时, 类型只支持(jpg, jepg, png, gif), 同时受mustExt参数限定, 效果如下：

当listType="video"时，类型只支持(mp4), 同时受mustExt参数限定, 效果如下：

API

参数	说明	类型	默认值
listType	文件展示类型，可选值为file, img, video	String	file
token	上传文件的token	String	''
domain	上传空间绑定的域名	String	''
sortable	文件列表是否可拖拽排序	Boolean	false
multiple	是否允许多文件上传	Boolean	false
selectable	是否对列表可选择	Boolean	false
selectLabel	列表可选择时的文案	String	''
selected	列表默认已选中的key数组	String[]	[]
multipleChooice	列表可选是否支持多选	Boolean	false
maxSize	单个文件最大允许的尺寸,单位是兆(MB),默认0表示无限制	Number	0
defaultList	默认的文件列表	Object[]	[]
mustExt	默认的文件类型,默认无限制	String[]	[]