0


element ui ---- el-upload实现手动上传多个文件

ui部分

<el-upload
        ref="upload"drag:file-list="fileList":auto-upload="false":on-change="onchange":on-remove="handleRemove"
        action="javascript:void(0)"
        multiple
      ><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div></el-upload>

js 实现上传

// 上传函数handleUpload(){const formData =newFormData()// fileList 在data中定义的数组,把所有文件放到formData中this.fileList.forEach((f)=>{
        formData.append('file', f.raw)})// 上传文件 api 【createFileRequest是自己封装的一个接口】createFileRequest(formData).then((res)=>{this.msgSuccess('文件上传成功')this.fileList =[]}).catch((e)=>{this.msgError('文件上传失败')})},onchange(file){if(file.size /1024/1024<100){this.fileList.push(file)}else{this.msgError('文件过大')this.handleRemove(file)}},// 文件删除处理handleRemove(file){this.fileList =this.fileList.filter((f)=> file.name !== f.name)}
标签: ui javascript vue.js

本文转载自: https://blog.csdn.net/qq_41932589/article/details/131479549
版权归原作者 行进中的蜗牛 所有, 如有侵权,请联系我们删除。

“element ui ---- el-upload实现手动上传多个文件”的评论:

还没有评论