如何实现element-ui的多文件上传功能？

本文共计585个文字，预计阅读时间需要3分钟。

上传方案一：先将文件上传至七牛，再将七牛返回的文件访问路径上传至服务器。+div class=upload-music-container el-upload class=upload-music ref=upload action=http://up-z2.qiniup.com :data={token: '...'}+

上传方案一：

先将文件上传到七牛，再将七牛上传返回的文件访问路径上传到服务器

<div class="upload-music-container"> <el-upload class="upload-music" ref="upload" action="up-z2.qiniup.com/" :data="{token:uploadToken}" multiple accept=".mp3" :before-upload="uploadBefore" :on-change="uploadChange" :on-success="uploadSuccess" :on-error="uploadError"> <el-button size="small" type="primary">选取文件</el-button> <div slot="tip" class="el-upload__tip">仅支持上传mp3文件，文件大小不超过500M</div> </el-upload> <el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button> </div> export default { name: 'uploadMusic', data() { return { headers: {}, uploadToken: null, canUploadMore: true, fileList: null, } }, created() { this.headers = {} //此处需要与server约定具体的header this.getUploadToken() }, methods: { //获取上传七牛token凭证 getUploadToken() { this.$127.0.0.1:8000/api/UploadFile/" list-type="picture-card" :auto-upload="false" :on-change="OnChange" :on-remove="OnRemove" :on-preview="handlePictureCardPreview" :before-remove="beforeRemove" > <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogVisible"> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog> <el-button type="" @click="fun">点击查看filelist</el-button> <el-button type="" @click="onSubmit">提交</el-button> </div> </template> <script> import {host,batchTagInfo} from '../../api/api' export default { data() { return { param: new FormData(), form:{}, count:0, fileList:[], dialogVisible:false, dialogImageUrl:'' }; }, methods: { handlePictureCardPreview(file) { this.dialogImageUrl = file.url; this.dialogVisible = true; }, beforeRemove(file, fileList) { return this.$confirm(`确定移除 ${ file.name }？`); }, OnChange(file,fileList){ this.fileList=fileList }, OnRemove(file,fileList){ this.fileList=fileList }, //阻止upload的自己上传，进行再操作 // beforeupload(file) { // console.log('-------------------------') // console.log(file); // //创建临时的路径来展示图片 // //重新写一个表单上传的方法 // this.param = new FormData(); // this.param.append('file[]', file, file.name); // this.form={ // a:1, // b:2, // c:3 // } // // this.param.append('file[]', file, file.name); // this.param.append('form',form) // return true; // }, fun(){ console.log('------------------------') console.log(this.fileList) }, onSubmit(){ this.form={ a:1, b:2, c:3 } let file='' for(let x in this.form){ this.param.append(x,this.form[x]) } for(let i=0;i<this.fileList.length;i++){ file='file'+this.count this.count++ this.param.append(file,this.fileList[i].raw) } batchTagInfo(this.param) .then(res=>{ alert(res) }) } } } </script> <style> </style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。