d2-crud-plus

# 文件上传lib

【d2p-uploader】目前支持腾讯云cos、七牛、阿里云oss、等三种对象存储的web端直传，以及本地服务器form表单上传
文件上传组件、头像裁剪组件、富文本等均依赖本上传lib

# 云上传准备【form表单上传无需此步骤】

  1. 创建相应的bucket，配置跨域访问等
  2. 生产环境还需配置获取相应的授权(以各平台上java为例)：

# 引入

import Vue from 'vue'
import { D2pUploader } from 'd2p-extends'  //组件将会懒加载
import { request } from '@/api/service'

// 配置上传参数
Vue.use(D2pUploader, {
  defaultType: 'cos', //默认类型为腾讯云上传，可选值：【cos、qiniu、alioss、form】
  cos: {
    domain: 'https://d2p-demo-1251260344.cos.ap-guangzhou.myqcloud.com',
    bucket: 'd2p-demo-1251260344',
    region: 'ap-guangzhou',
    secretId: '', //
    secretKey: '', // 传了secretKey 和secretId 代表使用本地签名模式（不安全，生产环境不推荐）
    getAuthorization  (custom,context) { // 不传secretKey代表使用临时签名模式,此时此参数必传（安全，生产环境推荐）
      return request({ //请求后端获取sts授权
        url: '/upload/cos/getAuthorization',
        method: 'get'
      }).then(ret => {
        // 返回结构如下
        // ret.data:{
        //   TmpSecretId,
        //   TmpSecretKey,
        //   XCosSecurityToken,
        //   ExpiredTime, // SDK 在 ExpiredTime 时间前，不会再次调用 getAuthorization
        // }
        return ret.data
      })
    }
  },
  alioss: {
    domain: 'https://d2p-demo.oss-cn-shenzhen.aliyuncs.com',
    bucket: 'd2p-demo',
    region: 'oss-cn-shenzhen',
    accessKeyId: '',
    accessKeySecret: '',
    getAuthorization  (custom) { // 不传accessKeySecret代表使用临时签名模式,此时此参数必传（安全，生产环境推荐）
      return request({ //请求后端获取sts授权
        url: '/upload/alioss/getAuthorization',
        method: 'get'
      }).then(ret => {
       // ret.data={
       //   securityToken,
       //   accessKeySecret,
       //   accessKeyId,
       //   expiration
       // }
        return ret.data
      })
    }
  },
  qiniu: { //七牛上传
    bucket: 'd2p-demo',
    getToken (custom) {
      return request({ //请求后端获取token
        url: '/upload/qiniu/getToken',
        method: 'get'
      }).then(ret => {
        return ret.data // 返回格式：{token:xxx,expires:xxx}
      })
    },
    domain: 'http://pzrsldiu3.bkt.clouddn.com'
  },
  form: { //本地服务端上传
    action: '', //上传url
    name:'file', //上传时文件的参数名
    data:{}, //上传附加参数
    headers:{}, //上传请求头
    successHandle (res) { // 上传成功后，后台返回结果处理
      return { url: res.data }  // data是该文件的url
    },
    withCredentials: false //是否带cookie
  }
   // ,buildKey(){} //key生成规则方法，也可以配置在组件的uploader参数里面，默认根据时间日期和文件名称生成
})

# 使用

文件上传组件、头像裁剪组件、富文本等均依赖本lib 本lib配置好之后，这些组件均支持文件上传功能，直接使用这些组件即可

如果需要临时覆盖全局上传参数，可以在props中传入uploader:{}即可

export const crudOptions = {
  columns: [
    {
      title: '头像',
      key: 'avatar',
      type: 'avatar-uploader',
      form: {
        component: {
            props:{
                uploader:{
                    type: 'form', //临时修改上传后端为form方式
                    action: 'xxx', // 临时修改form表单上传url
                }   
            }
        }   
      }   
    }
  ]
}

# 文件名保持

默认会将文件名改成随机字符串，因为某些特殊符号命名的图片在ios上无法显示，随机字符串的文件名在各类云端支持都比较好。
但某些情况下需要保持住上传的文件名，您可以按如下配置。
或者重写buildKey方法。
全局配置

{
    cos:{
       custom:{
           keepName: true
       }
    },
    alioss:{
        custom:{
            keepName: true
         }
    },
    form:{同上}
    qiniu:{同上}
}

临时配置

export const crudOptions = {
  columns: [
    {
      form: {
        component: {
            props:{
                uploader:{
                    custom: {
                        keepName: true //文件名保持，该参数默认为false，将会给文件名改成随机字符串
                    }
                }   
            }
        }   
      }   
    }
  ]
}

# 默认全局配置参考

export default {
  defaultType: 'cos', // 默认的上传后端类型
  cos: { // 腾讯云 cos 的配置
    domain: 'https://d2p-demo-1251260344.cos.ap-guangzhou.myqcloud.com',
    bucket: 'd2p-demo-1251260344',
    region: '',
    custom: {
      // buildKey，获取授权等接口中将会传入
    },
    secretId: '', //
    secretKey: '', // 传了secretKey 和secretId 代表使用本地签名模式（不安全，生产环境不推荐）
    getAuthorization: null // 不传secretKey代表使用临时签名模式时，此参数必传（安全，生产环境推荐）
  },
  alioss: {
    domain: 'https://d2p-demo.oss-cn-shenzhen.aliyuncs.com',
    bucket: 'd2p-demo',
    region: 'oss-cn-shenzhen',
    secretId: '',
    secretKey: '', // 传了secretKey 和secretId 代表使用本地签名模式（不安全，生产环境不推荐）
    getAuthorization (custom) { // 不传secretKey代表使用临时签名模式时（安全）
      return new Promise((resolve, reject) => {
        reject(new Error('请实现config.alioss.getAuthorization，返回Promise获取临时授权token'))
      })
    },
    custom: {
      // buildKey，获取授权等接口中将会传入
      keepName: false // 阿里云的精简oss有点问题，中文文件名的文件无法上传
    },
    sdkOpts: { // sdk配置
      // secure: false // 默认为非https上传,为了安全，你可以设置为true
    }
  },
  qiniu: {
    bucket: 'd2p-demo',
    getToken (custom, fileName) {
      return new Promise((resolve, reject) => {
        reject(new Error('请实现config.qiniu.getToken方法，返回Promise获取七牛的授权token{token:xxx,expires:xxx}'))
      })
    },
    domain: 'http://pzrsldiu3.bkt.clouddn.com',
    custom: {
      // buildKey，获取授权等接口中将会传入
    }
  },
  form: {
    successHandle (ret) { // 需要将res.url 设置为url
      if (ret.data == null || ret.data === '') {
        throw new Error('上传失败')
      }
      return { url: ret.data }
    },
    action: undefined,
    name: 'file',
    headers: {},
    data: {},
    custom: { // buildKey，获取授权等接口中将会传入
    }
  },
  buildKey (fileName, custom = {}) { // 文件key的构建规则
    const date = new Date()
    let fileType = 'file'
    if (custom != null && custom.fileType != null) {
      fileType = custom.fileType
    }
    let keepName = false
    if (custom.keepName != null) {
      keepName = custom.keepName
    }
    let ext = ''
    if (keepName) {
      ext = '/' + fileName
    } else {
      if (fileName.lastIndexOf('.') >= 0) {
        ext = fileName.substring(fileName.lastIndexOf('.'))
      }
    }

    return fileType + '/' + date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate() + '/' + Math.floor(Math.random() * 100000000000000) + ext
  }
}

← cascade-format →