cv-upload-file 文件上传 ¶

特性 ¶

使 el-upload 组件更简单、好用
Vue前端直传至阿里云OSS
支持Vue3
批量上传
支持断点续传
分片、断点续传

全局配置

 
// 注册 cv-pc-ui
Vue.use(cvPcUI, {
  // 专门设置全局的 cvUploadFile 属性
  'cvUploadFile': {
    fileSize: 10
    // 上传地址
    upAction: 'https://jsonplaceholder.typicode.com/posts',
    isCanDelete: false,
    // 上传后对响应处理, 拼接为一个URL地址
    upResponseFn(response, file) {
      // 根据响应结果, 设置 URL
      return {
        name: file.name,
        url: 'https://xxx.com/file/' + response.path, // 示例而已
        size: file.size
      }
    }
  }
})

示例 ¶

::: demo

vue

<template>
  <div>
    <cvUploadFile v-model="formData.file_value" :initValue="formData.file_cdn"></cvUploadFile>
  </div>
</template>
<script>
export default {
  data() {
    return {
      image1: '',
      image2: '',
      image3: '',
      images: [],
      formData: {
        file_value: [],
        file_cdn: ['https://10ui.cn/default/ad_video/v.f30.mp4', 'https://10ui.cn/default/ad_video/v.f30.mp4']
      }
    };
  },
  methods: {
    handleResponse(response, file, fileList) {
      return file.url;
    },
    handleRequest(data) {
      console.log(data);
      return Promise.resolve();
    },
    handleSuccess() {
      this.$message.success('提交成功');
    }
  },
  mounted() {}
};
</script>

:::

属性 ¶

属性名	类型	默认值	说明
v-model/modelValue	String, Object, Array	-	文本内容
upAction	String	-	必选参数，上传的地址
upName	String	file	文件名
upHeaders	Object	-	上传图片携带的header
signatureParam	Object	-	自定义上传数据, 例如
upCookie	Boolean	false	是否需要带cookie
upAccept	String	-	接受上传的文件类型
upResponseFn	Function	-	上传成功的进一步处理
multiple	Boolean	true	是否支持多选文件
limit	Number	-	最大允许上传个数
beforeRemove	Function	-	删除前的操作
disabled	Boolean	-	是否禁用
fileSize	Number	-	图片大小限制 (MB)
fileType	Array	-	文件类型, 例如['png', 'jpg', 'jpeg']
isCanDownload	Boolean	true	是否显示下载
isCanDelete	Boolean	true	是否可删除
isCanUploadSame	Boolean	true	是否可上传相同文件

事件 ¶

事件名称	说明	回调参数
remove	当文件被删除时触发	(file, fileList)
success	文件上传成功时触发	(file, fileList)
error	上传失败时触发	(error)

预览截图 ¶

校验STS凭证
上传文件

cv-upload-file 文件上传 ¶

特性 ¶

示例 ¶

属性 ¶

事件 ¶

相关链接 ¶

预览截图 ¶