cv-upload-image 图片上传

简要

• 单张图片模式
• 多张图片模式
• 拖拽上传
• 裁剪上传

全局配置

const uploadOption = {
  fileSize: 10
  upAction: 'https://jsonplaceholder.typicode.com/posts', // 上传地址
  data: {token: 'xxx'}, // 附带数据
  // 上传后对响应处理, 拼接为一个图片的地址
  upResponseFn(response, file, fileList) {
    // 根据响应结果, 设置 URL
    return 'https://xxx.xxx.com/image/' + response.id
  }
}
// 注册 cv-pc-ui
export function useCvUI(app) {
  app.use(cvPcUi, {
    // 可以在这里设置全局的 cvUploadImage 属性
    cvUploadImage: {
      ...uploadOption
    },
    upload: {
      ...uploadOption
    }
  });
}

示例

::: demo

<template>
  <div>
    <h1 style="margin-bottom: 20px">上传组件 - 图片</h1>
    <cv-form-base>
      <h4 style="margin-bottom: 20px">默认使用全局配置</h4>
      <!-- <cv-form-item label="单张图">
        <cvUploadImage v-model="formData.image" v-model:initValue="formData.image_cdn" />
      </cv-form-item>
      <cv-form-item label="单张大图">
        <cvUploadImage v-model="formData.image" showBig v-model:initValue="formData.image_cdn" />
      </cv-form-item> -->
      <cv-form-item label="多张图片">
        <cvUploadImage v-model="formData.image_arr" multiple limit="5" v-model:initValue="formData.image_arr_cdn" />
      </cv-form-item>
      <!-- <cv-form-item label="多张大图">
        <cvUploadImage v-model="formData.image_arr" showBig multiple v-model:initValue="formData.image_arr_cdn" />
      </cv-form-item> -->
      <!-- <h4 style="margin-bottom: 20px">使用局部配置</h4>
      <cv-form-item label=" ">
        <cvUploadImage v-model="formData.image2" v-model:initValue="formData.image_cdn" />
      </cv-form-item>
      <cv-form-item label="拖拽">
        <cvUploadImage v-model="formData.image4" v-model:initValue="formData.image_cdn" drag />
      </cv-form-item>
      <cv-form-item label="裁剪">
        <cvUploadImage v-model="formData.image4" crop :initValue="formData.image_cdn" />
      </cv-form-item> -->
    </cv-form-base>
    <h4>显示数据</h4>
    <pre style="margin-top: 20px; background: #f6f6f6; padding: 20px; clear: both">{{ formData }}</pre>
  </div>
</template>
<script>
export default {
  data() {
    return {
      upAction1: 'https://jsonplaceholder.typicode.com/posts/',
      upAction: 'https://10yun.com/posts/',
      formData: {
        image: '',
        image_cdn: '',
        image_arr: [],
        image_arr_cdn: []
      }
    };
  },
  created() {
    setTimeout(() => {
      this.formData = {
        image: '',
        image_cdn: '//10ui.cn/default/default.png',
        image_arr: [],
        image_arr_cdn: ['//10ui.cn/default/default.png', '//10ui.cn/default/default.png']
      };
    }, 100);
  },
  methods: {
    handleRequest(data) {
      console.log(data);
      return Promise.resolve();
    },
    handleSuccess() {
      this.$message.success('提交成功');
    }
  },
  mounted() {}
};
</script>

:::

属性

属性名	类型	默认值	说明
v-model/modelValue	String,Object,Array	-	文本内容
initValue	String	-	初始化
fileType	Array	-	文件类型, 例如['png','jpg','jpeg']
fileSize	Number	-	是否禁用
showSize	Number	150	图片显示大小
showBig	Boolean		是否显示大图
multiple	Boolean	true	是否支持多选文件
limit	Number	-	最大允许上传个数 ,文件个数显示
lazy	Boolean	false	图片懒加载
drag	Boolean	false	是否启用拖拽上传
signatureType	String		签名类型
signatureFn	Function		签名方法

thumbSuffix 说明 // 缩略图后缀, 例如七牛云缩略图样式 (?imageView2/1/w/20/h/20) // 如果存在, 则列表显示是加缩略图后缀的, 弹窗不带缩略图后缀

upExtendAliyun 说明

• 需要配置参数：apiFunc ，并且返回参数如下

  {
    
  }

• 需要

裁剪组件属性

属性名	类型	默认值	说明
crop	Boolean	false	是否剪裁
cropHeight	Number	-	裁剪高度
cropWidth	Number	-	裁剪宽度

事件

事件名	说明
error	上传失败

相关链接

• element-plus