|
@@ -0,0 +1,77 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <input type="file" @change="uploadFileFun" multiple id="selectFile">
|
|
|
+ <span id="progress1"></span>
|
|
|
+
|
|
|
+ <span @click="downloadFileFun">download</span>
|
|
|
+ <span id="progress2"></span>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: "UploadFile",
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ status: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ uploadFileFun(e) {
|
|
|
+ let file = e.target.files[0]
|
|
|
+ let xhr = new XMLHttpRequest()
|
|
|
+ let formData = new FormData()
|
|
|
+ formData.append('file', file)
|
|
|
+ formData.append('bucket', 'tourism')
|
|
|
+
|
|
|
+ // 跟踪上传进度
|
|
|
+ xhr.upload.onprogress = function(event) {
|
|
|
+ let progress1 = document.querySelector('#progress1')
|
|
|
+ const percent = Math.floor((event.loaded / event.total) * 100)
|
|
|
+ progress1.innerHTML = percent + '%'
|
|
|
+ console.log(`Uploaded ${event.loaded} of ${event.total}, ${percent}%`)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 跟踪完成:无论成功与否
|
|
|
+ xhr.onloadend = function() {
|
|
|
+ if (xhr.status == 200) {
|
|
|
+ console.log("success")
|
|
|
+ } else {
|
|
|
+ console.log("error " + this.status)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ xhr.open("POST", "/tourism-merchant-api/thirdapi/upload/single/minio")
|
|
|
+ xhr.send(formData)
|
|
|
+ },
|
|
|
+ downloadFileFun() {
|
|
|
+ const xhr = new XMLHttpRequest()
|
|
|
+
|
|
|
+ xhr.onprogress = function(event) {
|
|
|
+ if (event.lengthComputable) {
|
|
|
+ const progress2 = document.querySelector('#progress2')
|
|
|
+ const percent = Math.floor((event.loaded / event.total) * 100)
|
|
|
+ progress2.innerHTML = percent + '%'
|
|
|
+ console.log(`Received ${event.loaded} of ${event.total} bytes`)
|
|
|
+ } else {
|
|
|
+ console.log(`Received ${event.loaded} bytes`) // 没有 Content-Length
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 跟踪完成:无论成功与否
|
|
|
+ xhr.onloadend = function() {
|
|
|
+ if (xhr.status == 200) {
|
|
|
+ console.log("success")
|
|
|
+ } else {
|
|
|
+ console.log("error " + this.status)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ xhr.open("GET", "http://localhost/ceshi.jpg")
|
|
|
+ xhr.send()
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+</style>
|