ImageUpload 图片上传（新）

ImageUpload 与 ImgUpload 不同之处在于新版本集成了创客贴功能，其余功能与用法基本一致，旧版本能继续试用，如果需要使用创客贴，则使用 ImageUpload 组件。

配置方式

import Vue from 'vue';
// 按需引入
import { ImageUpload } from '@polyv/polyv-ui';
Vue.use(ImageUpload, {
  uploadAction: ({ image, data }) => {
    return new Promise((resolve) => {
      resolve(url);
    });
  },

  cropperAction: ({ url, width, height, x, y }) => {
    return new Promise((resolve) => {
      resolve(newUrl);
    });
  },

  checkYellowAction: ({ url }) => {
    return new Promise((resolve) => {
      resolve(true);
    });
  },
});

// 全局引入
import PolyvUI from '@polyv/polyv-ui';
Vue.use(PolyvUI, {
  ImageUpload: {
    uploadAction: ({ image, data }) => {
      return new Promise((resolve) => {
        resolve(url);
      });
    },

    cropperAction: ({ url, width, height, x, y }) => {
      return new Promist((resolve) => {
        resolve(newUrl);
      });
    },
  }
});

指令方式跳过选择文件方式

const file = new File();

ImageUpload.imageUpload({
  autoFileSource: file, // 传入 autoFileSource 跳过选择文件步骤，直接上传传入的文件
});

this.$imageUpload({
  autoFileSource: file, // 传入 autoFileSource 跳过选择文件步骤，直接上传传入的文件
});

// 兼容旧版本
ImageUpload.imgUpload({
  autoFileSource: file, // 传入 autoFileSource 跳过选择文件步骤，直接上传传入的文件
});

基础用法

<template>
  <div>
    <plv-image-upload
      v-model="url"
      :data="{ type: 'splashImage' }">
      <plv-button>点击上传</plv-button>
    </plv-image-upload>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        url: ''
      };
    },
    watch: {
      url() { console.log(this.url); }
    }
  };
</script>

显示代码

上传后裁剪

<template>
  <div>
    <plv-image-upload
      cropper
      v-model="url"
      :data="{ type: 'splashImage' }">
      <plv-button>点击上传</plv-button>
    </plv-image-upload>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        url: ''
      };
    },
    watch: {
      url() { console.log(this.url); }
    }
  };
</script>

显示代码

指令用法

指令用法的参数与组件方式的参数一致。

<template>
  <div>
    <plv-button @click="handleClick">上传图片</plv-button>
  </div>
</template>

<script>
  export default {
    methods: {
      async handleClick() {
        const url = await this.$imageUpload({
          data: { type: 'splashImage' }
        });
        console.log(url);
      }
    }
  };
</script>

显示代码

预览模式

<template>
  <plv-image-upload
    preview
    preview-width="320px"
    preview-height="187px"
    v-model="url"
    :data="{ type: 'splashImage' }" />
</template>

<script>
  export default {
    data() {
      return {
        url: ''
      };
    },
    watch: {
      url() { console.log(this.url); }
    }
  };
</script>

显示代码

钩子函数

<template>
  <plv-image-upload
    preview
    preview-width="320px"
    preview-height="187px"
    v-model="url"
    :data="{ type: 'splashImage' }"
    :before-local-upload="beforeLocalUpload"
    :before-chuangkie-choice="beforeChuangkitChoice"
  />
</template>

<script>
export default {
  data() {
    return {
      url: ''
    };
  },
  watch: {
    url() { console.log(this.url); }
  },

  methods: {
    async beforeLocalUpload() {
      await this.$confirm('你当前选择的是本地上传');
    },
    async beforeChuangkitChoice() {
      await this.$confirm('你当前选择的是在线设计');
    },
  }
};
</script>

显示代码

Attributes

参数	说明	类型	可选值	默认值
value / v-model	绑定值	String	-	-
accept-type	input中的acceptType	String	-	image/jpeg, image/jpg, image/png
check-yellow	是否需要监黄	Boolean	-	false
data	上传时附带的参数	Object	-	-
cropper	是否需要裁剪	Boolean	-	false
cropper-title	裁剪窗口标题	String	-	裁剪图片
cropper-options	裁剪参数，详细见图片裁剪组件	Object	-	-
preview	预览模式	Boolean	-	false
preview-width	预览宽度	String	-	-
preview-height	预览高度	String	-	-
preview-image-options	预览图片组件额外参数	Object	-	-
preview-placeholder	预览占位文本	String Boolean	-	上传图片
upload-action	上传回调，Promise返回图片地址	Function	-	-
cropper-action	裁剪回调，Promise返回新的裁剪图片地址	Function	-	-
check-yellow-action	监黄接口，Promise 返回 booler，返回 true 则为通过，false 为不通过	Function	-	-
size-limit	文件大小限制，单位：kb，不传或传0表示不限制	Number	-	0
readonly	只读模式，仅preview下有效	Number	-	false
append-params	额外添加的调用参数，触发 upload-action、cropper-action、check-yellow-action 时会带上该传入的内容	Object	-	-
upload-placeholder	本地上传按钮占位文本（新版本新增）	String	-	-
chuangkit-enabled	创客贴开关，是否显示创客贴功能，优先级高于创客贴全局开关	Boolean	-	-
chuangkit-params	创客贴参数（新版本新增）	Object	-	-
chuangkit-template-params	创客贴模板获取参数（新版本新增）	Object	-	-
before-local-upload v2.7.0	唤起本地上传弹窗之前的钩子函数，返回 Promise 对象	Function	-	-
before-chuangkit-choice v2.7.0	唤起创客贴选择之前的钩子函数，返回 Promise 对象	Function	-	-

Events

事件名称	说明	回调参数
success	上传成功	图片url
error	上传失败	失败原因