vue elementUI 如何处理文件批量上传

问题:elementUI的Upload上传组件,通过设置multiple为true,就可以实现多选文件;但是在处理的时候还是一个一个传上去。目前需要在所有文件上传后,将某几个上传错误的结果拼接起来做一次提醒
解决:
  • this.$refs.upload.uploadFiles 该属性可以获取上传的文件相关信息,包括上传后后端返回的response
  • html
el-upload
  ref='upload'
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  multiple
  :on-success='upLoadSuccess'
  accept=".doc,.docx">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传doc/docx文件</div>
</el-upload>
  • 方法处理
upLoadSuccess(response, file, fileList) {
    if (this.$refs.upload.uploadFiles) {
        let length = this.$refs.upload.uploadFiles.length
        this.UpLoadFilesLength ++  // 全局变量,用来计算upLoadSuccess方法调用次数
        if (this.UpLoadFilesLength == length) {
            this.UpLoadAllFilesLength = 0  // 如果方法调用的次数和文件列表的长度相同,说明所有文件都上传完毕,将该全局变量置0
            this.resErrorStr() // 该函数处理每个文件上传错误情况下response拼接
        }
    }
},
resErrorStr() {
    if (this.$refs.upload.uploadFiles) { // 如果存在这个值
        let filesList = this.$refs.upload.uploadFiles.slice()
        let UpLoadAllErrorStr = '' // 错误信息拼接变量
        for (let i = 0; i < filesList.length; i++) {
            if (filesList[i].response) {
                if (filesList[i].response.code != 200) { // 如果该文件上传后返回的状态值不是200,则说明该文件上传错误
                    UpLoadAllErrorStr += `${filesList[i].response.message}<br/>`
                }
            }
        }
        if (!UpLoadAllErrorStr) {
            this.$message({ type: 'success', message: '上传文件成功!' });
        } else {
            this.$message({
                type: 'error',
                dangerouslyUseHTMLString: true,
                message: UpLoadAllErrorStr
            });
        }
        this.$refs.uploadAll.uploadFiles = [] // 调用完成之后将值置空,防止再次上传将上次结果也记录下来
    }
},
handleRemove(file, fileList) {
    console.log(file, fileList);
},
handlePreview(file) {
    console.log(file);
},
beforeRemove(file, fileList) {
    return this.$confirm(`确定移除 ${ file.name }?`);
}
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
VueElementUI中实现文件上传需要使用ElementUI中的el-upload组件。首先需要安装ElementUI和相关插件: 1.通过 npm 安装 ElementUIvue-resource: npm install element-ui --save npm install vue-resource --save 2.在Vue项目中的main.js文件中引入ElementUIVueResource: import Vue from 'vue' import ElementUI from 'element-ui' import VueResource from 'vue-resource' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) Vue.use(VueResource) 3.在需要上传文件的组件中添加el-upload组件: <template> <el-upload class="upload-demo" :headers="headers" :on-preview="handlePreview" :on-remove="handleRemove" :before-upload="beforeUpload" :on-success="handleSuccess"> <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">jpg/png 文件,最大支持 2MB</div> </el-upload> </template> 其中,headers是文件上传时需要携带的请求头;handlePreview、handleRemove、beforeUpload和handleSuccess是自定义的方法。 4.在组件的script中添加自定义方法: export default { data () { return { headers: { Authorization: 'Bearer ' + sessionStorage.getItem('token') } } }, methods: { handlePreview (file) { console.log(file) }, handleRemove (file) { console.log(file) }, beforeUpload (file) { if (file.type !== 'image/png' && file.type !== 'image/jpeg') { this.$message.error('上传文件只能是jpg或png格式!') return false } if (file.size / 1024 / 1024 > 2) { this.$message.error('上传文件大小不能超过 2MB!') return false } }, handleSuccess (response, file, fileList) { console.log(response, file, fileList) } } } 在以上方法中,handlePreview、handleRemove和handleSuccess方法分别是文件预览、文件移除和文件上传成功时触发的方法;beforeUpload方法用于限制文件大小和格式。 5.最后,可以通过el-upload组件的action属性指定文件上传处理地址: <el-upload class="upload-demo" :headers="headers" :on-preview="handlePreview" :on-remove="handleRemove" :before-upload="beforeUpload" :on-success="handleSuccess" action="http://your-upload-url.com"> <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">jpg/png 文件,最大支持 2MB</div> </el-upload>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值