console
var App = {
setup(){
return {
url: 'https://scp-static.cicsc.com/uat/spreadChannel/7454145363443712/template7454145363443712.png'
}
},
mounted() {
window.that = this
},
methods: {
clickBtn(e) {
let progress = new XEAjax.Progress()
progress.onDownloadProgress = evnt => {
let value = progress.value
let loadedSize = progress.loaded.size
let loadedUnit = progress.loaded.unit
let totalSize = progress.total.size
let totalUnit = progress.total.unit
let speedSize = progress.speed.size
let speedUnit = progress.speed.unit
let remaining = progress.remaining
console.log(`进度:${value}% ${loadedSize}${loadedUnit}${totalSize}/${totalUnit}; 速度:${speedSize}/${speedUnit}秒; 剩余:${remaining}秒`)
}
XEAjax.fetchGet(this.url, {progress, method: 'GET'})
.then(res=>{
console.log(res)
}).catch(e => {
alert('不支持跨域')
})
}
}
}
var app = window.app = Vue.createApp(App)
app.use(VXEUtils, XEUtils)
app.use(VXEAjax, XEAjax)
app.mount("#app");
<script src="//unpkg.com/vue@3.0.0-beta.14"></script>
<script src="//unpkg.com/xe-utils"></script>
<script src="//unpkg.com/vxe-utils"></script>
<script src="//unpkg.com/xe-ajax"></script>
<script src="//unpkg.com/vxe-ajax"></script>
<div id="app">
<input v-model="url"></input>
<button @click="clickBtn">测试跨域</button>
</div>