How can I lazy download large attachment in user background?-CodePudding

I have some large attachment in event.

At first, my link code is

<a :download="scope.row.name" :href="`data:${scope.row.type};base64,${scope.row.contentBytes}`">download</a>

However, when I get the attachment information from

I use Vue with element UI, so some Js sample will be helpful.

-- updated

My method now:

When I click download, it will create a $value request

then after about 1 min it finally fininsh.

check the link for the complete video.

-- code

// graphapi.js
export function getAttachment(eventId, attachmentId) {
  return request({
    url: `/events/${eventId}/attachments/${attachmentId}/$value`,
    method: 'get'
  })
}

// form.vue
// template
 <el-table-column v-if="action === 'edit'" width="150px" label="操作">
          <template slot-scope="scope">
            <el-button size="small" type="text">
              <a @click.prevent="downloadAttachment(scope.row.id)">download</a>
            </el-button>
            <el-button size="small" type="text" @click="deleteAttachment(scope.row.id)">remove</el-button>
          </template>
        </el-table-column>
// script
downloadAttachment(attachmentId) {
      const attachment = getAttachment(this.$route.params.id, attachmentId)
const link = document.createElement('a')
link.href = `data:${attachment.type};base64,${attachment.contentBytes}`
link.click()
    },

CodePudding user response：

Host your images on a CDN, that way you will be able to download them directly without any delay you will not put any load onto your server (hence being able to serve files to people faster around the world without your server crashing).

Depending on where you host your app, you may have it included, could use Cloudfront or Cloudinary.