el-upload 超详细-（附件，图片，多类型文件）玩转上传upload–new FormData()

1. • 代码（我的项目代码：注解在下面）

代码复制直接用，可以实现所有文件上传，更改接口即可（如需详细注解，学习，下面的详解完全够用，从0到学会这一片加官方文档就够了）

  文档文件夹:     文件描述:    上传附件                    

TempList: [],//模板数据dialogVisibleTemp:false,//附件弹窗pageIndexTemp: 1,pageSizeTemp: 10,totalPageTemp: 0,// 附件上传FujianList: [],//表格数据fileList: [],//上传数据列表保存docinfoDescriptione: "",//下拉框字段doctype: "",//文档文件夹ownertable: "cugather",//传递的主键值options: [{ //是否下拉框value: 'pubic ',label: '公共文件夹'}, {value: 'temp',label: '模板文件夹',// disabled: true}, ],dialogVisibleFJ:false,//附件弹窗pageIndex11: 1,pageSize11: 10,totalPage11: 0,fileType: [ "pdf", "doc", "docx", "xls", "xlsx","txt","png","jpg", "bmp", "jpeg"],fileSize: 50,fileLimit: 5,

// 附件弹窗数据dialogVisibleTemp getTempData() { this.dialogVisibleTemp = true this.addTempUpdate() }, addTempUpdate() { createFujian( Object.assign({ current: this.pageIndexTemp, size: this.pageSizeTemp, doctype:'temp' }, ) ).then((res) => { console.log('FormDatas详情信息',res); this.TempList =res.data.data.records this.totalPageTemp = res.data.data.total; }); }, // 每页数 sizeChangeHandleTemp(val) { this.pageSizeTemp = val; this.pageIndexTemp = 1; this.addTempUpdate(); }, // 当前页 currentChangeHandleTemp(val) { this.pageIndexTemp = val; this.addTempUpdate(); }, loadTempHandle(row) { let doclinksid = row.doclinksid let name = row.filename console.log(name) this.downBlobFile("/eam/doclinks/downloadFile/"+doclinksid, this.searchForm ,name); }, // 附件弹窗数据dialogVisibleFJ getFJData() { this.dialogVisibleFJ = true this.addFujianUpdate() }, //上传文件之前 beforeUpload (file){ if (file.type != "" || file.type != null || file.type != undefined){ //截取文件的后缀，判断文件类型 const FileExt = file.name.replace(/.+\./, "").toLowerCase(); //计算文件的大小 const isLt5M = file.size / 1024 / 1024  { console.log(567,"添加成功") this.$message.success('添加成功') this.addFujianUpdate(); }) .catch(() => { this.$message.error('添加失败') }) }, //上传成功后的回调 handleSuccess(){ }, //查詢附件信息 addFujianUpdate() { createFujian( Object.assign({ current: this.pageIndex11, size: this.pageSize11, ownertable:'cugather', ownerid:this.formInline.cugatherid }, ) ).then((res) => { console.log('FormDatas详情信息',res); this.FujianList =res.data.data.records this.totalPage11 = res.data.data.total; }); }, // 每页数 sizeChangeHandle1(val) { this.pageSize11 = val; this.pageIndex11 = 1; this.addFujianUpdate(); }, // 当前页 currentChangeHandle1(val) { this.pageIndex11 = val; this.addFujianUpdate(); }, loadFujianHandle(row) { let doclinksid = row.doclinksid let name = row.filename console.log(name) this.downBlobFile("/eam/doclinks/downloadFile/"+doclinksid, this.searchForm ,name); }, dLoadFujian( doclinksid) { downLoadFujian({ doclinksid }).then((res) => { if (res.code == 200) { window.open(res.msg);//浏览器中打开新的界面 //window.location.href=url;//原始界面中打开 } }); }, deleteFujianHandle(doclinksid) { this.$confirm("是否确认删除ID为" + doclinksid, "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning", }) .then(function () { let doclinksids =[] doclinksids[0]=doclinksid return delFujian(doclinksids); }) .then((data) => { this.$message.success("删除成功"); this.addFujianUpdate(); }); },

2. • 注解（upload常见参数解析；项目常用）

3. • 上传文件类型

1. • action参数

 accept="image/jpeg,image/gif,image/png"

设定action参数里面的值可以设置

2. • before-upload参数—-钩子函数

before-upload参数添加钩子函数可以上传时候判断类型是否符合。不用上面1,2可以实现多种判断。

判断类型：上传文件格式；大小等等

//上传文件之前 beforeUpload (file){ if (file.type != "" || file.type != null || file.type != undefined){ //截取文件的后缀，判断文件类型 const FileExt = file.name.replace(/.+\./, "").toLowerCase(); //计算文件的大小 const isLt5M = file.size / 1024 / 1024 < 50; //这里做文件大小限制 //如果大于50M if (!isLt5M) { this.$showMessage('上传文件大小不能超过 50MB!'); return false; } //如果文件类型不在允许上传的范围内 if(this.fileType.includes(FileExt)){ return true; } else { this.$message.error("上传文件格式不正确!"); return false; } } },

4. • 选取和上传分开处理-auto-upload

有时我们需要把选取和上传分开处理，比如上传图片，先选取文件提交到前端，图片处理后再把base64内容提交到后台。

auto-upload：控制；通过按钮点击上传。在on-change选取文件的时候，通过地址指针将文件保存到外面，就在外面拿到了文件。

选取上传

可以保存FormDatas（用于携带多种参数）也可以保存item（代表这个文件）。外面定义接收变量，我就不写了

onUploadChange(item){ // this.$showMessage('文件上传中........') //上传文件的需要formdata类型;所以要转 let FormDatas = new FormData() FormDatas.append('file',item.file); FormDatas.append('ownertable',this.ownertable); FormDatas.append('ownerid',this.formInline.cugatherid); FormDatas.append('docinfoDescriptione',this.docinfoDescriptione); FormDatas.append('doctype',this.doctype);

5. • on-change 的执行顺序早于 before-upload，且不区分是否自动

手动上传，官方给出的方式是调用 el-upload 组件的 submit()

submit() {this.uploadFiles.filter(file => file.status === 'ready').forEach(file => {this.$refs['upload-inner'].upload(file.raw);});}

只有 ready 的才可以调用 upload

upload(rawFile) {this.$refs.input.value = null;if (!this.beforeUpload) {return this.post(rawFile);}// before-upload 在该阶段执行！const before = this.beforeUpload(rawFile);if (before && before.then) {before.then(processedFile => {// 忽略了逻辑分支判断this.post(rawFile); }, () => {// ①this.onRemove(null, rawFile);});} else if (before !== false) {this.post(rawFile);} else {// ①this.onRemove(null, rawFile);}}

6. • new FormData()构造函数

首先，我们要明确formData里面存储的数据形式，一对key/value组成一条数据，key是唯一的，一个key可能对应多个value。如果是使用表单初始化，每一个表单字段对应一条数据，它们的HTML name属性即为key值，它们value属性对应value值。
FormData类型其实是在 XMLHttpRequest 2级定义的，它是为序列化表以及创建与表单格式相同的数据（当然是用于XHR传输）提供便利。

1. 创建一个空对象实例

var formData = new FormData();

2. 表单元素作为初始化参数，来实例化一个formData对象

名字密码

// 获取页面已有的一个form表单var form = document.getElementById("myForm");// 用表单来初始化var formData = new FormData(form);// 我们可以根据name来访问表单中的字段var name = formData.get("name"); // 获取名字var psw = formData.get("psw"); // 获取密码// 当然也可以在此基础上，添加其他数据formData.append("token","kshdfiwi3rh");

3. 增删改查操作

get(key)/getAll(key)来获取对应的value，

formData.get("ownertable"); // 获取key为name的第一个值formData.get("ownertable"); // 返回一个数组，获取key为name的所有值

增加数据

 FormDatas.append('file',item.file); FormDatas.append('ownertable',this.ownertable); FormDatas.append('ownerid',this.formInline.cugatherid); FormDatas.append('docinfoDescriptione',this.docinfoDescriptione);

更改数据

formData.append("ownertable", "v1");formData.set("ownertable", "1");formData.getAll("ownertable"); // ["1"]

判断是否存在

formData.has("ownertable")

删除数据

formData.delete("ownertable")

遍历数据

var i = formData.entries(); i.next(); // {done:false, value:["ownertable1", "v1"]}i.next(); // {done:fase, value:["ownertable2", "v2"]}i.next(); // {done:fase, value:["ownertable3", "v1"]}i.next(); // {done:true, value:undefined}

entries()来获取一个迭代器

可以看到返回迭代器的规则
每调用一次next()返回一条数据，数据的顺序由添加的顺序决定
返回的是一个对象，当其done属性为true时，说明已经遍历完所有的数据，这个也可以作为判断的依据
返回的对象的value属性以数组形式存储了一对key/value，数组下标0为key，下标1为value，如果一个key值对应多个value，会变成多对key/value返回

7. • 项目截图