二次封装上传element

2021-04-30 02:27

阅读:525

标签:span   对象   comm   can   handler   new   efi   pop   eth   

  
    
      class="upload-demo"
      action=""
      v-if="show"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-upload="beforeUpload"
      :before-remove="beforeRemove"
      :http-request="fileUpload"
      :on-success=‘onSuccess‘
      :on-exceed="onExceed"
      multiple
      :limit="3"
      :file-list="fileList">
      点击上传
      
只能上传3个文件,且单个文件不超过5MB
    
  

import { uploadFile,deleteFile } from "@/api/sys";
//  
//  fileobj:[{id:‘843030C9258049ECAE9E2281B3C2B462‘,name:‘133442none.png‘}]
export default {
  name: "",
  components: {},
  props: ["obj",‘appendixType‘],
  data() {
    return {
      fileList:[],id:‘‘,show:true,fileList1:[],idList:‘‘
    };
  },
  created() {
    this.idList=‘‘;
  },
  methods: {
    // 回显
    getFile(obj){
      console.log(obj);
      // setTimeout(()=>{
        var fileArr=JSON.parse(JSON.stringify(obj))
        for (var item of fileArr){
          console.log(item)
          item.name=item.appendixName.slice(6)
          item.id=item.appendixId
          if(this.idList.length>0){
            this.idList=this.idList+","+item.id
          }else{
            this.idList=item.id
          }
        }
        console.log(this.idList)
        this.fileList=JSON.parse(JSON.stringify(fileArr))
      // },500)
    },
    // 上传之前
    beforeUpload(file){
      console.log(this.obj)
      if(5*1024*1024
        this.$message({
          message: ‘单个文件不超过5MB!‘,
          type: ‘warning‘
        });
        return false;
      }else if(this.fileList.length>3){
        this.$message({
          message: ‘最多可上传3个附件!‘,
          type: ‘warning‘
        });
        return false;
      }
    },
    // 删除附件
    handleRemove(file, fileList) {
      console.log(file, fileList);
      if(this.fileList1.length>0){
        this.show=false
        this.show=true
        this.fileList=this.fileList1
      }
    },
    // 
    handlePreview(file) {
      // console.log(file);
    },
    // 限制
    onExceed(files, fileList) {
      this.$message.warning(`只能上传3个文件,且单个文件不超过5Mb`);
    },
    //删除之前
    beforeRemove(file, fileList) {
      // return this.$confirm(`确定移除 ${ file.name }?`);
      if(5*1024*1024>file.size || file.size==undefined){
        this.fileList1=[]
        return this.$confirm(`确定移除 ${ file.name }?`, ‘提示‘, {
          confirmButtonText: ‘确定‘,
          cancelButtonText: ‘取消‘,
          type: ‘warning‘
        }).then(async () => {
          let datVal={
            fileId:file.id
          };
          const result = await deleteFile(file.id,datVal);
          if(result.code==200){
            this.$message({
              message: result.message,
              type: ‘success‘
            });
          let arr= this.idList.split(",");
          let index= arr.indexOf(file.id);
          console.log(index,file.id,this.idList)
          arr.splice(index,1);
          console.log(arr)
          this.idList=arr.toString();
          console.log(this.idList)
          }else{
            this.$message({
              message: ‘删除失败‘,
              type: ‘warning‘
            });
            this.fileList1=JSON.parse(JSON.stringify(this.fileList))
          }
        })
      }
    },
    //文件上传
    async fileUpload(file){
      console.log(file)
      let param = new FormData(); //创建form对象
      param.append(‘file‘,file.file);
      param.append(‘AppendixType‘,this.appendixType);
      const result = await uploadFile(this.appendixType,param);
      console.log(file,result,this.fileList)
      this.id=result.data.id
      if(this.idList.length>0){
        this.idList=this.idList+‘,‘+result.data.id
      }else{
        this.idList=result.data.id
      }
      
      // let file=this.fileList.pop()
      // file.id=result.data.id
      // console.log(this.fileList)
    },
    // 上传成功
    onSuccess(response, file, fileList){
      file.id=this.id
    }
  },
};
 
 
 
如何在页面中使用
import UploadFile from "@/components/common/oaForm/uploadFile";
components: {
        headLine,
        selectPerson,
        UploadFile,
      },
              
                
                  
                    :obj="fileobj"
                    :appendixType="appendixType"
                    ref="UploadFile"
                  />
                
              
            

二次封装上传element

标签:span   对象   comm   can   handler   new   efi   pop   eth   

原文地址:https://www.cnblogs.com/fanfan1991/p/14711094.html


评论


亲,登录后才可以留言!