<el-upload class="uploaddemo" ref="upload"  action="" name="uploadFiles" 

                            :multiple="true" :limit="uploadFileLimit" :file-list="form.fileList" :data=’’

                            :on-change='changeFlies' :on-exceed='handleExceed'

:on-success="successUpload"  :before-remove="beforeRemove

:auto-upload="false">

                            <i class="upload iconfont iconjiafujian" style="top: -8px;right: 0px;"></i>

                        </el-upload>

 

  <script>

  export default {

    data() {

      return {

           fileList: [],

uploadFileLimit:0,

form: {

            fileList: [],

            },

deleteFileList:[], //文件被删除的ID的数组

      };

    },

methods: {

//上传文件,成功,失败调用的方法

changeFlies(file, fileList){

            var self = this;

            self.uploadFileStatus = true;

            let existFile = fileList.slice(0fileList.length - 1).find(=> f.name === file.name);

            let isLt5M = file.size / 1024 / 1024 < self.uploadFileSize;

            if (existFile) {

                this.$message.error('当前文件已经存在!');

                fileList.pop();

          }

            if (!isLt5M) {

                this.$message.error(`上传的文件大小不能超过 ${self.uploadFileSize}MB!`);

                fileList.pop();

            }

           self.form.fileList = fileList;

        },

              handleExceed(filesfileList) { this.$message.warning(当前限制选择${this.uploadFileLimit} 

个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);

                      },

//貌似没用啊

successUpload(responsefilefileList){

            var self = this;

            self.emptyInput();

            self.$emit('sumitORCancelEdit','1');

            self.uploadFileStatus = true;

        },

//点击文件后面的”X”,就调用的事件

  beforeRemove(filefileList) {

            var self = this;

           self.form.fileList = fileList; //删除后剩的的文件数组

            self.deleteFileList.push(file.fileId); // 把删除的文件ID 保存一下,如果是更新的话,把这个传给后台,告诉他前台删了哪个文件

        },

submitCreate(){

            var self = this;

            self.loading = true;

          var formData = new FormData();

//增加其他的参数

                            formData.append("clueTitle"self.form.clueTitle);

                            //如果是编辑的话,传递要删除文件的ID

if(self.deleteFileList && self.deleteFileList.length > 0){

                formData.append("delFilesId"self.deleteFileList);

  }

 

if(self.uploadFileStatus && self.form.fileList.length > 0){

                for (var i = 0i < self.form.fileList.lengthi++) {

                    if(self.form.fileList[i].raw){ // raw是文件格式

                        formData.append("uploadFiles"self.form.fileList[i].raw);

} 

 }

 ******Api.save(formData).then(res => {

            });

                },

 

}

</script>

 

上传后文件的数组内的详情:

 

 

 

 

 

 

save(params) {

        var url = ""

        var config = {

            withCredentials: true,

            headers: {

                "Content-Type": 'multipart/form-data'

            }

        }

        return AxiosUtil.post(urlparamsconfig).then(response => {

            return response

        }, err => {

            return err

        });

    },

 

 

Logo

前往低代码交流专区

更多推荐