element file文件 附件上传_element 上传 下载文件方法

1.结构

:disabled="true"

action=""

:file-list='attchList'

:http-request="uploadImages"

:before-upload="beforeAvatarUpload"

:on-change="handleChange"

:on-preview="handleList"//上传list点击事件

show-file-list

mulitple

accept=".bmp, .png, .jpg, .word, .xlsx, .xls, .ppt, .pdf, .zip, .war, .rar, .exe, .jar">

上传附件

2.js，点击上传文件list事件：on-preview

//上传

beforeAvatarUpload(file) {

if (file.size > 200 * 1024 * 1024) {

this.$message.error('文件不能超过200M');

return false

}

},

uploadImages(val) {

let formData = new FormData()

//key：file与后台对应

formData.append('file', val.file)

http.post(

'/file/upload',

formData,

{

headers: {'Content-Type': 'multipart/form-data'}

}

).then(res => {

if (res.status==0) {

let obj = {

appendixName: res.data.filePath,

appendixPath: res.data.message,

}

this.ruleForm.announceAppendixList.push(obj);

} else {

this.$message.error(res.message)

}

}).catch((error) => {

console.log(error)

});

},

//下载

handleList(file){

let url='/file/downLoadToLocal';

http.get(

url,

file.url ? {filePath: file.url} : {},

{responseType: 'blob'}

).then(res => {

let fileName = decodeURIComponent(res.headers['content-disposition'].slice(res.headers['content-disposition'].indexOf('=') + 2));

this.downloadFile(res.data, fileName);

})

},

downloadFile(content, fileName) {

(fileName && fileName.indexOf('.') !== -1) && (fileName = fileName.slice(0, fileName.indexOf('.')));

const blob = new Blob([content], {

type: content.type

})

if ('download' in document.createElement('a') && navigator.userAgent.indexOf('Edge') <= -1) { // 非IE 及edge下载

const elink = document.createElement('a')

fileName && (elink.download = fileName)

elink.style.display = 'none'

elink.href = URL.createObjectURL(blob)

document.body.appendChild(elink)

elink.click()

URL.revokeObjectURL(elink.href) // 释放URL 对象

document.body.removeChild(elink)

} else { // IE10+下载

fileName ? navigator.msSaveOrOpenBlob(blob, fileName) : navigator.msSaveOrOpenBlob(blob)

}

},