手动上传与清除

最新推荐文章于 2024-05-03 21:05:41 发布

m0_62782752

最新推荐文章于 2024-05-03 21:05:41 发布

阅读量317

点赞数 5

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_62782752/article/details/135342405

版权

1.上传文件改变的属性对应的方法手动上传文件用submit

2.替换多少次,上传接口就要请求多少次,显得比较多余,浪费性能清除多余用 clearFiles

   ----html
              <el-upload
                    class="avatar-upload"
                    ref="upload"
                    list-type="picture"
                    :file-list="fileList"
                    action="#"
                    v-model="file"
                    :auto-upload="false"
                    :http-request="uploadFile"
                    :on-success="uploadFile1"
                    :before-upload="beforeAvatarUpload"
                    :on-change="(file,fileList) => changeFile(file,fileList)"
                    :show-file-list="false"
                >
                    <btn-free style="margin-top: 0.7rem;" btnTxt="导入"/>
                </el-upload>

----js
          methods: {
        
             changeFile1(file,fileList,item,index){
                  this.file = fileList[fileList.length - 1]
                  console.log('this.file',this.file)
                  this.$refs.upload.submit();
            },
            changeFile(file,fileList){
                if(file.status=='ready'){
                     this.$prompt('请输入上传后的文件名', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputValue:file.name
                      }).then(({ value }) => {
                          this.file = fileList[fileList.length - 1]
                        //   this.fileName.name = value;
                          console.log('确定');
                        console.log('this.file',this.file);
                        console.log('value',value);
                        // this.$refs.upload.$children[0].post(file);;
                        this.$refs.upload.submit();
                      }).catch(() => {
                        console.log('取消');
                        this.$refs.upload.clearFiles();
                        this.$message({
                          type: 'info',
                          message: '取消文件上传'
                        });
                      });
                }
             },
        // 导入
    uploadFile(i1){
        let that = this
        let formData = new FormData()
        formData.append('file',that.file.raw); 

                          that.$uploader('/score/analyst/contact/importScoreAnalystContact',formData).then(res => {
            if(res.code == 1){
                that.getDataList()
                that.$refs.upload.clearFiles()
            }
        })

    },

    },




        }