1.文件批量上传

<el-form-item label="项目资料：" prop="attachmentVos"><!-- 上传的文件进行回显 --><div style="display:inline-block;" :key="'p'+pindex"><el-tag  v-for="item in ruleForm.attachmentVos" :key="item.uuid?item.uuid:item.id" closable :disable-transitions="false" @close="handleClose(item)" style="margin-right:3px;">{{item.name}}</el-tag></div><!-- 上传的文件 -->       <el-upload class="upload-demo" :style="ruleForm.attachmentVos.length==0?'margin-top: -40px;':''" :ref="`Uploader-${uploadId}`" :name="uploadId" :auto-upload="false" action="#" :http-request="annexUploads" multiple :on-preview="handlePreview" :on-success="handleSuccess" :on-change="changeUpload" :on-remove="handleRemove" :file-list="fileList" accept=".rar,.zip,.wps,.doc,.docx,.pdf,.xls,.xlsx,.jpg" :show-file-list="false"><el-button slot="trigger" size="small" type="primary">上传文件</el-button><div slot="tip" class="el-upload__tip">支持文件格式：.rar .zip .wps .doc .docx .pdf .xls .xlsx .jpg</div></el-upload>
</el-form-item>

   ruleForm: {attachmentVos: [],},fd: new FormData(),//上传的文件uploadId: Math.random().toString(36).substr(2).toLocaleUpperCase(),//确保ref为唯一的值fileList: [],uploadFiles: [], //待上传的文件列表fileTotal: 0, //上传文件总数pindex: 0,//上传的文件及时回显currentUploadNum: 0,//用来判断是否将选中的文件全部上传

 // 附件资料--------开始handleSuccess(response, file, fileList) {console.log("成功了", response, file, fileList);},submitUpload() {this.$refs.upload.submit();},handleRemove(file, fileList) {console.log(file, fileList);},handlePreview(file) {console.log("file", file);},changeUpload(file, fileList) {console.log("fdsbsgfbsdf", file, fileList, fileList[fileList.length - 1]);//获取添加文件进来的状态file.status == "ready" && this.uploadFiles.push(file.raw);//获取原始文件的个数this.fileTotal = document.getElementsByName(this.uploadId)[0].files.length;//如果原始文件和upload的个数相同的时候就说明已经添加完了，可以触发上传的方法了if (this.uploadFiles.length === this.fileTotal) {for (let i = 0; i < fileList.length; i++) {console.log('fileList[i].type',fileList[i].raw.type);console.log('fileList[i]',fileList[i]);let nameList = fileList[i].name.split('.')let getSuffix = nameList[nameList.length - 1]console.log('fileList[i]名字后缀：', getSuffix);const isXls = getSuffix === "wps" || getSuffix === 'doc' || getSuffix === 'docx' || getSuffix === 'pdf' || getSuffix === 'xls' || getSuffix === 'xlsx' || getSuffix === 'jpg'if (!isXls) {this.uploadFiles = [];this.fileList = [];return this.$message.error('文件后缀名必须为.wps/.doc/.docx/.pdf/.xls/.xlsx/.jpg！')}const isLt10M = fileList[i].size / 1024 / 1024;if (isLt10M > 50) {this.uploadFiles = [];this.fileList = [];return this.$message.error("文件大小不能超过 50MB!");}}}if (this.uploadFiles.length === this.fileTotal) {//获取上传文件的组件const Uploader = this.$refs[`Uploader-${this.uploadId}`];//触发上传文件列表的方法Uploader.submit();this.currentUploadNum = 0;console.log("this.currentUploadNum", this.currentUploadNum);}},annexUploads(file) {console.log("filefilefilefilefile", file);// let fd = new FormData();this.fd.append("Filedata", file.file);console.log("fdfdfdfdfdfdfd", this.fd);this.currentUploadNum++;//  console.log('this.uploadFiles.length,this.fileTotal',this.currentUploadNum , this.fileTotal);if (this.currentUploadNum === this.fileTotal) {this.loading = true;this.fd.append("type", "1");//多加一个传参annexUploads(this.fd).then((res) => {if (res.code == "200") {this.loading = false;this.$message.success("附件上传成功！");res.data.forEach((item, index) => {this.ruleForm.attachmentVos.push(item);});console.log("this.ruleForm.attachmentVos",this.ruleForm.attachmentVos);this.uploadFiles = [];this.fileList = [];this.fd = new FormData();} else {this.$message.error(res.message);}}).catch((err) => {this.uploadFiles = [];this.fd = new FormData();this.loading = false;});}},// 项目内容--项目资料---删除handleClose(tag) {this.$confirm("是否确定删除这个文件?", "删除", {confirmButtonText: "确认",cancelButtonText: "取消",}).then(() => {this.ruleForm.attachmentVos.splice(this.ruleForm.attachmentVos.indexOf(tag),1);this.pindex++;this.$message({type: "success",message: "删除成功",});}).catch(() => {this.$message({type: "info",message: "已取消删除",});});},// 附件资料--------结束

:ref="'Uploader-'+uploadId"

if (this.uploadFiles.length === this.fileTotal) {//获取上传文件的组件var name = "Uploader-" + this.uploadIdvar Uploader = this.$refs[name];//触发上传文件列表的方法Uploader.submit();this.currentUploadNum = 0;
}

2.下载

2.1直接使用文件下载

export function batchDownFile(params, requestType) {return request({url: '/fileIo/batchDownFile',method: 'GET',params,requestType,responseType: 'blob',})
}

request.js

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'// create an axios instance
const service = axios.create({baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url// withCredentials: true, // send cookies when cross-domain requeststimeout: 10000 // request timeout
})service.interceptors.request.use(config => {let obj = JSON.parse(sessionStorage.getItem("store"))if (obj && obj.system.userInfo.token) {config.headers['token'] = obj.system.userInfo.token}if (store.getters.token) {config.headers['X-Token'] = getToken()}return config},error => {// do something with request errorconsole.log(error) // for debugreturn Promise.reject(error)}
)// response interceptor
service.interceptors.response.use(/*** If you want to get http information such as headers or status* Please return  response => response*//*** Determine the request status by custom code* Here is just an example* You can also judge the status by HTTP Status Code*/response => {//决定文件流new Blob([res])//const res = response.data--------new Blob([res])//const res = response--------new Blob([res.data])const res = response.dataconsole.log("res111", res, response);if (res.code == 200) {return Promise.resolve(res)} else if (res.code == 0) {return Promise.resolve(res)} else if (res.code == 401) {Message.error(res.msg)store.dispatch('user/resetToken').then(() => {location.reload()})} else if (res.code == 20000) {return Promise.resolve(res)} else {//注意：下载时工作流此处需要返回res，返回报错信息，文件流下载不下来// Message({//     message: res.msg,//     type: 'error'// })// return Promise.reject(res)return res}},error => {console.log('err' + error) // for debugconsole.log("全局-失败的报错信息", error.response)Message({message: error.response.data.data ? error.response.data.data : error.response.data.message ? error.response.data.message : "接口报错",type: 'error',duration: 5 * 1000})return Promise.reject(error.response)}
)export default service

    batchDownFile(val,row) {let params  = {urlList:row.upLoadUrl.join(","),zipName: "业务流程清单",}batchDownFile(params).then((res) => {console.log('res', res)let url = window.URL.createObjectURL(new Blob([res]))let link = document.createElement('a')link.style.display = 'none'link.href = urllink.setAttribute('download', '清单.docx') // 文件名document.body.appendChild(link)link.click()document.body.removeChild(link)window.URL.revokeObjectURL(url)}).catch((err) => {});},

2.2 调用后端接口，去访问返回的链接，并进行下载

<a id="a3333" ><div style="cursor: pointer; color: #169bd5" v-for="(item, index) in scope.row.appendId" :key="index" @click="appendIdDownLoad(item, 'a3333')">{{ item.name }}</div>
</a>

appendIdDownLoad(row, val) {let params = {url: row.url}downFile(params).then(res => {// console.log('res', res)let url = res.datadocument.getElementById(val).href = res.datadocument.getElementById(val).download = truedocument.getElementById(val).click()console.log('this.urlhref', document.getElementById(val))}).catch(err => { })},

2.3文件流进行下载，适配火狐33

<a id="a3333" ><div class="search-button"  @click="excelContract">导出</div>
</a>

excelContract() {var data = {pageNum: this.currentPage,pageSize: this.pagesize,};this.$api.excelContract(data).then((res) => {let url = window.URL.createObjectURL(new Blob([res]));// let link = document.createElement("a");// link.style.display = "none";// link.href = url;// link.setAttribute("download", "合同台账导出.xlsx"); // 文件名// document.body.appendChild(link);// link.click();// document.body.removeChild(link);// window.URL.revokeObjectURL(url);document.getElementById('a3333').href = urldocument.getElementById('a3333').download = '导出.xlsx'document.getElementById('a3333').click()});
},

element一次上传多个文件，并将文件名展示出来；使用文件流进行下载相关推荐

element ui视频上传（已上线，拿去即用）
element ui视频上传 + 进度条实现(拿去即用) 1.template 部分 2. script 部分 3. scss 部分 1.template 部分 <template>< ...
解决文件上传时，服务器中中文文件名乱码问题
解决文件上传时,服务器中中文文件名乱码问题参考文章: (1)解决文件上传时,服务器中中文文件名乱码问题 (2)https://www.cnblogs.com/yang-xiansen/p/11167 ...
php 上传sb2,基于标准的http来实现Android多文件上传
实现多文件的上传,基于标准的http来实现. 多文件上传MyUploader类的实现: /** * * 同步上传多个文件 * 基于标准的http实现,需要在非UI线程中调用,以免阻塞UI. * */ ...
php网页中不能上传图片,为什么我的PHP图片上传代码可以实现插入数据库但图片不能插入文件夹中？...
为什么我的PHP图片上传代码可以实现插入数据库但图片不能插入文件夹中? 关注:167 答案:4 mip版解决时间 2021-01-19 00:58 提问者慢慢学会遗忘 2021-01-18 00 ...
微信文件过大不能上传？学会这几种方法，再大文件也能轻松发
微信文件过大不能上传?学会这几种方法,再大文件也能轻松发微信已经逐渐成为办公必须,但微信不支持大文件的发送,那么遇到这种情况,很多小伙伴都会选择用QQ,其实微信也能发送大文件,只要方法用对,下面就来 ...
element upload获取上传成功的图片地址
关于upload获取上传成功的图片地址记录一个坑,在项目中用到了element的图片上传, 文档里的室这么写的获取图片的url handleAvatarSuccess(res, file) { th ...
element 实现头像上传
用element 实现头像上传,并且可以更换图片,我通过组件封装,加自定义v-model来实现上传前: 上传后: 1.在页面中引入图片上传组件 <el-form-item label=&quo ...
vue+element实现图片上传及裁剪功能（vue-cropper）
需求背景: 上传图片或者头像时,能够将图片进行裁剪(等比例缩放裁剪或非等比例裁剪) 效果图: 安装使用 1.安装 npm install vue-cropper // npm 安装 yarn add ...
使用ajax实现文件上传，使用input实现本地图片展示
使用ajax实现文件上传,使用input实现本地图片展示一.实现本地图片预览 HTML: <input type="file" id="chooseImage&q ...
批量替换一个文件中的文件名，例如将文件夹中s**_abnormal.jpg文件修改为s**_abnor.jpg
文章涉及到StringAbout::开头的函数具体实现参考:string与Cstring字符串类型转换和其他操作总结 CProcessFile::开头的函数实现参考:文件读写操作工具类CProcess ...

element一次上传多个文件，并将文件名展示出来；使用文件流进行下载

1.文件批量上传

2.下载

2.1直接使用文件下载

2.2 调用后端接口，去访问返回的链接，并进行下载

2.3文件流进行下载，适配火狐33

element一次上传多个文件，并将文件名展示出来；使用文件流进行下载相关推荐

最新文章

热门文章