vue+el-upload实现单文件多文件上传

vue+el-upload实现单文件多文件上传

1、单文件上传

<el-form-item :label="$t('Version.Attachment')">
   <el-upload
     class="upload-demo"
     action="#"
     :headers="myHeaders"
     :before-remove="beforeRemove"
     :on-change="nowFile"
     :multiple="false"
     :auto-upload="false"
   >
     <el-button size="small" type="primary" plain>选择附件</el-button>
     <div slot="tip" v-if="showTip">只能上传apk文件</div>
   </el-upload>
 </el-form-item>
 <div class="text-center">
    <el-button size="medium" type="primary" @click="checkSave()">{
   
   {
      $t("buttons.save")
    }}</el-button>
  </div>

var token = window.localStorage.getItem("access_token");
export default {
    
    
  data() {
    
    
    return {
    
    
      versionDetail: {
    
    },
      showTip: true, // 是否显示上传apk文件提示
      myHeaders: {
    
     Authorization: "bearer " + token },
      files:{
    
    }, // 要上传的文件
      keyId:''  // 上传文件参数
    };
  },
  created() {
    
    
    this.getData(1);
  },
  methods: {
    
    
	// 删除文件之前的钩子
    beforeRemove(file, fileList) {
    
    
      this.$confirm(`确定移除 ${
      
      file.name}？`,"提示",{
    
    
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(()=>{
    
    
        this.files = {
    
    }
        this.showTip = true
      });
    },
    // 当前文件
    nowFile(file, fileList) {
    
    
      this.files = file;
      let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
      if (extension !== "apk") {
    
    
        this.$message({
    
    
          message: "只能上传apk文件",
          type: "warning",
          showClose: true,
        });
        fileList.length = 0;
        return;
      }
      // 只获取最后一次选择的文件
      if (fileList.length > 1) {
    
    
        this.$confirm("确定替换当前文件吗？", "提示", {
    
    
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        })
          .then(() => {
    
    
            fileList.splice(0, 1);
          })
          .catch(() => {
    
    
            fileList.splice(1, 1);
          });
      }
      if (Object.keys(this.files).length==0) {
    
    
        this.showTip = true;
      } else {
    
    
        this.showTip = false;
      }
    },
    checkSave(){
    
    
      if(Object.keys(this.files).length==0){
    
    
        this.$message({
    
    
          message:'请传附件',
          type:'warning',
          showClose: true
        })
      } else {
    
    
        this.save()
      }
    },
    save() {
    
    
      var url = "api/cm/CfgAPKVersion/Add";
      this.$http.post(url, this.versionDetail).then((res) => {
    
    
        if (res.data.code === 0) {
    
    
          this.keyId = res.data.result.form.id;
          this.submitUpload()
          this.dialogVisible = false;
          this.$message({
    
    
            message: "添加成功",
            type: "success",
            showClose: true
          });
        } else {
    
    
          debugger;
        }
      });
    },
    // 文件上传
    submitUpload() {
    
    
      let fileFormData = new FormData();
      fileFormData.append("file", this.files.raw, this.files.name); //filename是键，this.files.raw是值(blob形式)，就是要传的文件
      this.$http
        .post(
          `api/atta/Attachment/SaveAPKFile?keyId=` + this.keyId,
          fileFormData
        )
        .then((res) => {
    
    
          this.getData(1);
        })
    },
  }

2、多文件上传

<el-form-item :label="$t('feedBackDetail.attachment')">
   <el-upload
     class="upload-demo"
     action="#"
     :headers="myHeaders"
     :before-remove="beforeRemove"
     :on-change="nowFile"
     :multiple="true"
     :auto-upload="false"
   >
     <el-button size="small" type="primary" plain>选择附件</el-button>
     <div slot="tip" v-if="showTip">只能上传图片</div>
   </el-upload>
 </el-form-item>
 <div class="text-center">
    <el-button size="medium" @click="dialogVisible = false">{
   
   {
      $t("buttons.cancel")
    }}</el-button>
    <el-button
      size="medium"
      type="primary"
      @click="save()"
      >{
   
   { $t("buttons.save") }}</el-button
    >
  </div>

var token = window.localStorage.getItem("access_token");
export default {
    
    
  mixins:[myMixin],
  data(){
    
    
    return {
    
    
      feedBackDetail:{
    
    
        UserContent:'',
        groupId:this.$route.query.id
      }, // 回复内容
      dialogVisible: false,
      myHeaders: {
    
     Authorization: "bearer " + token },
      showTip: true, // 附件提示
      files:{
    
    },  // 当前附件数据
      fileList:[], // 附件数组
    }
  },
  methods:{
    
    
    save(){
    
    
      if(this.feedBackDetail.UserContent == '' && this.fileList.length == 0){
    
    
        this.$notify({
    
    
          title: '警告',
          type:'warning',
          message:'您还未选择附件或者回复内容',
        })
      } else if(this.feedBackDetail.UserContent == '' && this.fileList.length > 0){
    
    
        this.submitUpload()
      } else if(this.feedBackDetail.UserContent != '' && this.fileList.length == 0){
    
    
        this.addFeedBack()
      } else {
    
    
        this.submitUpload()
        this.addFeedBack()
      }
    },
    // 添加回复
    addFeedBack(){
    
    
      var url = 'api/cm/BizMessage/AddDialog'
      this.$http.post(url, this.feedBackDetail).then((res) => {
    
    
        if (res.data.code === 0) {
    
    
          this.dialogVisible = false;
          this.$message({
    
    
            message: "保存成功",
            type: "success",
            showClose: true
          });
        } else {
    
    
          debugger;
        }
      });
    },
    // 文件上传
    submitUpload() {
    
    
      let fileFormData = new FormData();
      this.fileList.forEach((item)=>{
    
    
        fileFormData.append("file", item.raw, item.name); //filename是键，this.files.raw是值(blob形式)，就是要传的文件
      })
      this.$http
        .post(
          `api/atta/Attachment/SaveFile?keyId=${
      
      this.$route.query.id}&keyType=${
      
      new Date().getTime()}`,
          fileFormData
        )
        .then((res) => {
    
    
          this.getData(1);
        })
    },
    // 删除附件之前的钩子
    beforeRemove(file, fileList) {
    
    
      this.$confirm(`确定移除 ${
      
      file.name}？`,"提示",{
    
    
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(()=>{
    
    
        this.files = {
    
    }
        if(this.fileList.length == 0){
    
    
          this.showTip = true
        }
      });
    },
    // 当前附件变化的钩子
    nowFile(file, fileList) {
    
    
      this.files = file;
      let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
      if (extension == "jpg" || extension == "jpeg" || extension == "png" || extension == "gif") {
    
    
        this.fileList = fileList
      } else {
    
    
        this.$message({
    
    
          message: "只能上传图片",
          type: "warning",
          showClose: true,
        });
        fileList.splice(fileList.length-1,1)
        this.fileList = fileList
        return;
      }
      if (Object.keys(this.files).length==0) {
    
    
        this.showTip = true;
      } else {
    
    
        this.showTip = false;
      }
    }