Appearance
<el-upload accept=".doc,.docx,application/pdf,image/jpeg,image/png"
class="upload-form"
action="#" multiple
:show-file-list="false"
:file-list="formModel[formItem.key]"
:on-preview="onPreview"
:auto-upload="false"
:on-remove="(file, fileList) => { onRemove(file, fileList, formItem) }"
:on-change="(file, fileList) => { onChange(file, fileList, formItem) }">
<div class="upload-area">
<div class="icon"></div>
<div class="btn">点击上传文件</div>
<div class="tip">支持doc、docx、pdf、jpg、png格式</div>
</div>
</el-upload>
<div class="file-list">
<div v-for="file in formModel[formItem.key]" :key="file.uid">
<div class="file-name" @click="onPreview(file)">
<span>{{ file.name }}</span>
<i v-if="file.status == 'success' || file.status == 'ready'"
class="el-icon-delete"
@click.stop="onRemove(file, formModel[formItem.key], formItem)">
</i>
</div>
<el-progress v-if="file.status == 'ready'" :percentage="file.percentage">
</el-progress>
</div>
</div>
onRemove(file, fileList, formItem) {
this.formModel[formItem.key] = fileList.filter(item => item != file);
//取消上传
if (file.status == 'ready') {
file.cancel && file.cancel();
}
},
//el文档说这个钩子 添加文件、上传成功和上传失败时都会被调用。
//因为:auto-upload="false" 所以只有添加文件操作会调用此函数
async onChange(file, fileList, formItem) {
this.formModel[formItem.key] = fileList;
try {
//上传成功
const { data } = await uploadFile(file);
const [res] = data
Object.assign(file, res, { url: res.fileUrl, status: 'success' },)
} catch (err) {
//上传失败
this.formModel[formItem.key] = fileList.filter(item => item != file);
Object.assign(file, { status: 'fail' },)
}
},
//上传文件
const CancelToken = axios.CancelToken;
export const uploadFile = (file) => {
let formData = new FormData();
formData.append("uploadFile", file.raw);
return POST('/upload/uploadFile', formData, {
headers: { 'Content-Type': 'multipart/form-data' },
onUploadProgress: (e) => {
if (e.lengthComputable) {
const complete = (e.loaded / e.total * 100).toFixed(2);
file.percentage = Number(complete);
}
},
cancelToken: new CancelToken(function executor(c) {
file.cancel = c;
})
})
}
下载流
async downloadTemplate() {
const { data } = await xhr({ url: '/datashare/excel/download', method: 'get', responseType: 'arraybuffer' });
download(data, 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8', '文件模板.xlsx')
}
const download = (res, type, filename) => {
// 创建blob对象,解析流数据
const blob = new Blob([res], {
type: type
})
// 这里就是创建一个a标签,等下用来模拟点击事件
const a = document.createElement('a')
// 兼容webkix浏览器,处理webkit浏览器中href自动添加blob前缀,默认在浏览器打开而不是下载
const URL = window.URL || window.webkitURL
// 根据解析后的blob对象创建URL 对象
const herf = URL.createObjectURL(blob)
a.href = herf
a.download = filename
document.body.appendChild(a)
a.click()
// 收尾工作,在内存中移除URL 对象
document.body.removeChild(a)
window.URL.revokeObjectURL(herf)
}