在vue-cli中使用iview组件上传多个文件的功能

在vue-cli中使用iview组件上传多个文件的功能

思路：创建一个数组 把需要上传的文件 push到这个数组里面
需求：

点击提交按钮把上传后得文件URL地址当做参数传给后台；多个文件使用逗号隔开

样式随便写的，自己做的demo

html代码

<template>
  <div>
    <Upload
      ref="upload"
      multiple  //支持多选文件
      name="files"  //上传接口的参数
      :before-upload="handleUpload"  //上传之前调用
      :on-success="uploadSuccess"  //上传成功调用
      :on-error="uploadError"  //上传失败调用
      :format="['docx','doc','txt', 'pdf']"  文件上传的格式
      :on-format-error="handleFormatError"   //文件格式错误调用
      action="http://192.10.78.68:8060/FH_AM6/api/fileUpload/upload"  //上传的接口地址
    >
      <Button icon="ios-cloud-upload-outline">上传</Button>
    </Upload>
    <Button type="primary" @click="issues" class="issues">提交</Button>
  </div>
</template>

js代码

<script>
    export default {
        name: "ces",
      data(){
          return{
            uploadList: [],
            attachments:"" //附件
          }
      },
      created() {

      },
      //监听attachments对象的值，有新值添加进一个数组
      watch: {
        attachments:function(val,oldval){
          if(val){
            this.uploadList.push(val)
            //   console.log(this.uploadList)
          }
        }
      },
      methods:{
        //上传成功调用
        uploadSuccess(response){
          this.attachments = response
        },
        //上传失败调用
        uploadError(error){
          this.$Message.info(error);
        },
        //文件格式错误调用
        handleFormatError(){
          this.$Message.info("文件格式不正确,请上传excel格式文件");
        },
        //点击提交传参
        issues() {
          if (this.uploadList.length == 1){
            this.attachments = this.uploadList[0].url
            console.log(this.attachments)
          }else if(this.uploadList.length > 1){
            const urlList = []
            for(let j = 0;j<this.uploadList.length;j++){
              urlList.push(this.uploadList[j].url)
              //  console.log(urlList)
            }

            this.attachments = urlList.join(",")
            //   console.log(this.attachments)
          }  
          else {
            this.$ajax.post('http://192.10.78.68:8060/FH_AM6/api/manuscript/saveManuscript',
              this.$qs.stringify({
                FILE_PATHS:this.attachments,  //附件
              })
            ).then((res)=>{
              if(res.status==200){
                this.$router.push('/contributefinish')
              }
            }).catch(()=>{
              this.$Message.error('获取失败');
            })
          }
        },
        }
      }


</script>

整体代码

<template>
  <div>
    <Upload
      ref="upload"
      multiple
      name="files"
      :before-upload="handleUpload"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :format="['docx','doc','txt', 'pdf']"
      :on-format-error="handleFormatError"
      action="http://192.10.78.68:8060/FH_AM6/api/fileUpload/upload"
    >
      <Button icon="ios-cloud-upload-outline">上传</Button>
    </Upload>
    <Button type="primary" @click="issues" class="issues">提交</Button>
  </div>
</template>

<script>
    export default {
        name: "ces",
      data(){
          return{
            uploadList: [],
            attachments:"" //附件
          }
      },
      created() {

      },
      //监听attachments对象的值，有新值添加进一个数组
      watch: {
        attachments:function(val,oldval){
          if(val){
            this.uploadList.push(val)
            //   console.log(this.uploadList)
          }
        }
      },
      methods:{
        //上传成功调用
        uploadSuccess(response){
          this.attachments = response
        },
        //上传失败调用
        uploadError(error){
          this.$Message.info(error);
        },
        //文件格式错误调用
        handleFormatError(){
          this.$Message.info("文件格式不正确,请上传excel格式文件");
        },
        //点击提交传参
        issues() {
          if (this.uploadList.length == 1){
            this.attachments = this.uploadList[0].url
            console.log(this.attachments)
          }else if(this.uploadList.length > 1){
            const urlList = []
            for(let j = 0;j<this.uploadList.length;j++){
              urlList.push(this.uploadList[j].url)
              //  console.log(urlList)
            }

            this.attachments = urlList.join(",")
            //   console.log(this.attachments)
          }
          else {
            this.$ajax.post('http://192.10.78.68:8060/FH_AM6/api/manuscript/saveManuscript',
              this.$qs.stringify({
                FILE_PATHS:this.attachments,  //附件
              })
            ).then((res)=>{
              if(res.status==200){
                this.$router.push('/contributefinish')
              }
            }).catch(()=>{
              this.$Message.error('获取失败');
            })
          }
        },
        }
      }


</script>

<style scoped>
.issues{
  float: right;
}
</style>

以上是本章的全部内容