zui-upload

A Vue.js project

分为七牛云上传跟图片压缩两种，解决了手机拍照上传旋转跟压缩等问题
第一种使用方式：七牛云上传，包含图片压缩功能，七牛云上传时需要配置 qiniuOptions 配置项，直接上传七牛云，上传完毕返回上传图片的信息
第二种使用方式：图片压缩，只有压缩图片的功能，压缩成功后返回图片文件信息，根据返回的文件信息自己上传服务端
** tips: 支持slot自定义内容 **

安装

npm install zui-upload -S
 

全局使用

import ZuiUpload from "zui-upload";
Vue.use(ZuiUpload);

组件内使用

import ZuiUpload from "zui-upload";
components:{
  ZuiUpload
}

Example

<template>
  <div>
    <!-- 使用七牛云压缩图片并上传 -->
    <zui-upload
      :qiniu-options="qiniuOptions"
      :img-options="imgOptions"
      @next="next"
      @complete="complete"
      @error="error"
    ></zui-upload>
    <!-- 不上传，只压缩图片 -->
    <zui-upload :img-options="imgOptions" @complete="complete">
      <!-- 使用 slot 自定义内容 -->
      <p>我是自定义的内容</p>
    </zui-upload>
    <img id="previewImg" src alt>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgOptions: {
        width: 600,
        height: 600,
        quality: 0.8
      },
      qiniuOptions: {
        token: "你的七牛云token",
        // 七牛云路劲以 / 结尾，错误：http://yourpath.cn   正确：http://yourpath.cn/
        baseUrl: "你的七牛云路径"
      }
    };
  },
  methods: {
    next(res) {
      console.log(res);
      console.log("七牛云上传时：进度");
    },
    error(err) {
      console.log(err);
      console.log("七牛云上传错误时：错误信息");
    },
    complete(res) {
      console.log(res);
      console.log("上传完成");
      document.getElementById("previewImg").src = res.url;
    }
  }
};
</script>

Options

配置项	属性	描述	类型	默认值
imgOptions		图片的配置
	width	宽度	Number	-
	height	高度	Number	-
	quality	质量	Number	0.9
qiniuOptions		七牛云配置(不使用七牛云上传无需配置)
	token	七牛云token	String	-
	baseUrl	七牛云路径	String	-

Functions

函数	描述	参数
complete	文件上传(压缩)成功后触发	文件对象
next	文件上传中触发（七牛云上传时有效）	上传进度
error	文件上传失败后触发（七牛云上传时有效）	失败原因

Build Setup

# install dependencies
npm install
 
# serve with hot reload at localhost:8080
npm run dev
 
# build for production with minification
npm run build

For detailed explanation on how things work, consult the docs for vue-loader.