Skip to content
On this page
    <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)
}