Ant-design-vue: upload组件自定义上传 文档没案例 请提供一个 配合form组件验证

Created on 30 Apr 2019  ·  2Comments  ·  Source: vueComponent/ant-design-vue

  • [ ] I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

upload组件需要上传到腾讯云 只用用自定义上传customRequest

What does the proposed API look like?

customRequest案例

help wanted

Most helpful comment

我用的阿里云,应该差不多吧

    customRequest({ onSuccess, onError, file }) {
      const primaevalName = file.name
      const name = primaevalName.slice(0, primaevalName.lastIndexOf('.'))
      const suffix = primaevalName.slice(
        primaevalName.lastIndexOf('.'),
        primaevalName.length
      )
      const date = new Date()
      const fileName = `${name}_${date.getTime()}${suffix}`

      this.aliOSSClient
        .multipartUpload(fileName, file, {})
        .then(results => {
          let fileUrl = ''
          if (results.url) {
            fileUrl = results.url
          } else if (results.res.requestUrls) {
            const result = results.res.requestUrls
            if (result[0].indexOf('?') !== -1) {
              fileUrl = result[0].slice(0, result[0].indexOf('?'))
            } else {
              fileUrl = result[0]
            }
          }
          onSuccess(fileUrl)
        })
        .catch(() => {
          onError()
          this.$message.error(this.$t('public.uploadFailed'))
        })
    }

All 2 comments

我用的阿里云,应该差不多吧

    customRequest({ onSuccess, onError, file }) {
      const primaevalName = file.name
      const name = primaevalName.slice(0, primaevalName.lastIndexOf('.'))
      const suffix = primaevalName.slice(
        primaevalName.lastIndexOf('.'),
        primaevalName.length
      )
      const date = new Date()
      const fileName = `${name}_${date.getTime()}${suffix}`

      this.aliOSSClient
        .multipartUpload(fileName, file, {})
        .then(results => {
          let fileUrl = ''
          if (results.url) {
            fileUrl = results.url
          } else if (results.res.requestUrls) {
            const result = results.res.requestUrls
            if (result[0].indexOf('?') !== -1) {
              fileUrl = result[0].slice(0, result[0].indexOf('?'))
            } else {
              fileUrl = result[0]
            }
          }
          onSuccess(fileUrl)
        })
        .catch(() => {
          onError()
          this.$message.error(this.$t('public.uploadFailed'))
        })
    }

我用的阿里云,应该差不多吧

    customRequest({ onSuccess, onError, file }) {
      const primaevalName = file.name
      const name = primaevalName.slice(0, primaevalName.lastIndexOf('.'))
      const suffix = primaevalName.slice(
        primaevalName.lastIndexOf('.'),
        primaevalName.length
      )
      const date = new Date()
      const fileName = `${name}_${date.getTime()}${suffix}`

      this.aliOSSClient
        .multipartUpload(fileName, file, {})
        .then(results => {
          let fileUrl = ''
          if (results.url) {
            fileUrl = results.url
          } else if (results.res.requestUrls) {
            const result = results.res.requestUrls
            if (result[0].indexOf('?') !== -1) {
              fileUrl = result[0].slice(0, result[0].indexOf('?'))
            } else {
              fileUrl = result[0]
            }
          }
          onSuccess(fileUrl)
        })
        .catch(() => {
          onError()
          this.$message.error(this.$t('public.uploadFailed'))
        })
    }

请问如何实现进度显示和展示已上传的文件列表呢?谢谢!

Was this page helpful?
0 / 5 - 0 ratings