vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue多文件上传

vue项目中实现多文件上传功能实例代码

作者:zhuoyunluo77

我们平时经常做的是上传文件,下面这篇文章主要给大家介绍了关于vue项目中实现多文件上传功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

在vue项目中使用elementui 的 upload 上传组件,完成多个文件一次上传

一、效果图:

1.选择上传的文件:

待上传文件

2、上传完成:

已上传文件

3、删除文件:

待删除文件

二、主要的代码实现

注意处理列表中已上传文件何待上传文件,两者其实有区分的标志。我们可以在控制台中输出选择上传的文件列表,查看每个文件的代码信息,观察可以发现,如果是已上传的文件,则文件的状态status=“success”,如果是待上传文件,那么文件的状态status=“ready”。我们可以通过文件的状态来处理已上传至服务器和待上传至服务器的文件。

主要代码如下:

<template>
<div>
    <el-button type="text" @click="dialogVisible = true">上传附件</el-button>

   <el-dialog  width="400px" :visible.sync="dialogVisible" append-to-body>
     <div style="float:left">
         <el-upload 
          class="upload-demo"
          ref="upload"
          :limit="10" 
          accept=".txt, .txts, .pdf, .docx" 
          :multiple="true"
          action=" "      
          :on-change="handleFileChange"
          :on-remove="onRemove"
          :before-remove="beforeRemove"
          :on-exceed="fileExceed"
          :auto-upload="false"
          :file-list="fileList" 
          >
          <el-button slot="trigger" size="small" type="primary">选取附件</el-button> 
          <el-button style="margin-left: 10px;" v-if="fileList.length>0" size="small" type="success" @click="submitFileForm">上传附件</el-button>
       </el-upload>
        </div>
  <div slot="footer" class="dialog-footer">
    
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitFileForm">确 定</el-button>
  </div>
</el-dialog>
</div>
</template>
<script>
import store from "../../../store"
export default{
  name:"uploadFile",
  data() {
    return {
      dialogVisible:false,   
      //回显附件列表
      fileList: [],
      //上传附件列表
      files:[],
    };
    
  },
  mounted(){
    //显示已有附件
     this.getFiles()
  },
   methods:{
   //by文章id获取附件列表
    getFiles(){
      var articleId=0
      articleId=store.state.articleMsg.row.id
      console.log(articleId)
      this.$store.dispatch('fileManage/getFiles',articleId).then(res=>{
         if(res.succeeded){
           res.data.forEach(file=>{
             this.fileList.push({name:file.fileName,id:file.fileId});
           })
         }
         else
         {
           this.$message({
             type:'error',
             message:'获取附件失败'
           })
         }
      })
    },
    //上传文件之前
    beforeUpload(file){
      this.fileList.forEach(item=>{
      if(isEquael(item.fileName,file.name)){
        return this.$message.warning("该文件已存在")
      }
    })
    },
      // 上传发生变化钩子
    handleFileChange(file, fileList){
      this.files = fileList;
      this.fileList.push(file)
    },
    //文件个数超过最大限制时
    fileExceed(file, fileList){
      if(this.fileList.length>10){
         this.$message.warning("附件个数不能超过10个")
      }
    },
    //删除前的钩子
     beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }?`);
      },
    //删除的钩子
    onRemove(file,fileList){
     if(file.status==="success")
     {   
       var requestData=file.id
      this.$store.dispatch('fileManage/deleteFile',requestData).then(res=>{
        if(res.succeeded){
        
          this.fileList.pop(file)
          this.fileList=[];
          this.files = fileList;
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
           this.getFiles()
        }else{
          this.$message({
            type: 'error',
            message: '删除失败!'
          });
        }
      }).catch(()=>{
         this.$message({
            type: 'error',
            message: '请求失败!'
          });
      }) 
     }  
    },
    // 提交上传文件
    submitFileForm(){
      //判断是否有文件再上传
      if (this.files.length === 0) {
          return this.$message.warning('请选取文件后再上传')
      }
      //-- 创建新的数据对象 -->
      let formData = new FormData();
      //-- 将上传的文件放到数据对象中 -->
      this.files.forEach((file) =>{
       
        formData.append('files',file.raw)
      })
        //拿到文章id
      var articleid=store.state.articleMsg.row.id
      formData.append('articleid',articleid)
      this.$store.dispatch('fileManage/uploadFile',formData)
        .then(res => {
          if(res.succeeded){
            this.$message.success('上传成功!');
            this.fileList=[]
            this.getFiles()
          }else{
            this.$message.error('上传失败');
          }
        })
        .catch(error => {
          this.$message.error('上传失败!');
        });
      this.dialogVisible=false
    } 
    
  }
 
}
</script>

总结

到此这篇关于vue项目中实现多文件上传功能的文章就介绍到这了,更多相关vue多文件上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文