文件的上传和下载

上传文件

• 使用elementUI el-upload组件

this.$refs['组件名称'].submit()
action中填写上传地址

下载文件

window.open('url地址')
this.$refs['download'].download('url', '正在导出')
window.location.href = url
window.open('url')

base64 下载

const base64 = window.atob('base64码')
const unit = new Unit8Array(base64.length)
for (var i = 0; i < base64.length; i++) {
 unit[i] = base64.charCodeAt(i)
}
const blob = new Blob([unit], {
type: 'application/msword' })
// type，限制下载的问价类型
const name = 文件名称.xml
const val = document.createElement('a')
const href = window.URL.createObjectURL(blob)
var.href = href
val.download = name
document.body.appendChild(val)
val.style.display = 'none'
val.click()
document.body.removeChild(val)
window.URL.revokeObjectURL(href)

base64 回显图片
把路径给图片的src

src = `data:image/jpeg;base64,${base64码}`

• 使用特殊命名空间创建
  Vue-cropper

this.$refs.cropper.getCropData((base64) => {
        const saveLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
        saveLink.href = base64
        saveLink.download = 'wenjian.jpg'

        const event = document.createEvent('MouseEvents')
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
        saveLink.dispatchEvent(event)
      })

• 导出文件 post 请求表单导出文件

const obj ={ a: '999', b: '000', c: '7777'}

const from = document.createElement('form')
from.style.display = 'none'
form.action = 'api接口'
document.body.appendChild(from)

for (const key in obj) {
const input = document.createElement('input')
input.style = 'hidden'
input.name = key
input.value = obj[key]
form.appendChild(input)
}
form.submit()
form.remove()

• a标签下载文件 后端返回的是url路由

const xhr = new XMLHttpRequest()
xhr.open('get', 'https://www.baidu.cccc图片的url地址')
xhr.responseType: 'blob'
xhr.onload = () => {
  cosnt imageUrl = URL.createObjectURL(xhr.response)
   const a = document.createElement('a')
document.body.appendChild(a)
a.href = imageUrl
a.click()
document.body.removeChild()
window.URL.revokeObjectURL(imageUrl)
}