Elementui el-upload一次请求上传多个文件

weixin_50085094

已于 2023-03-16 15:07:17 修改

阅读量124

点赞数

文章标签： vue.js elementui javascript

于 2023-03-16 14:51:05 首次发布

本文链接：https://blog.csdn.net/weixin_50085094/article/details/129586719

版权

该文章展示了一个Vue.js组件`el-upload`的使用示例，用于处理多文件上传功能。用户可以选择并上传多种类型的文件，如图片、文档等，同时支持文件列表管理，包括添加、删除操作。文件上传通过axios库发送POST请求到指定服务器，并在上传成功或失败后有相应的反馈处理。

摘要由CSDN通过智能技术生成

          <el-upload 
              ref="upload" 
              :limit="5" 
              accept=".jpg,.gif,.png,.jpeg,.txt,.pdf,.doc,.docx,.xls,.xlsx" 
              name="files" 
              :multiple="true"
              action=""
             :headers="{ 'content-type': 'multipart/form-data' }"
              :on-change="handleFileChange"
              :before-remove="handleFileRemove" 
              :auto-upload="false"
              :file-list="upload.fileList" 
              >
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          </el-upload>
        <el-button type="primary" @click="submitFileForm">确 定</el-button>


export default {
  name: "uploadCT",
  data() {
    return {
      upload: {
        fileList: [],
        fileName: []
      },
    }
  },

  methods: {
    // 上传发生变化钩子
    handleFileChange(file, fileList) {
      this.upload.fileList = fileList;
    },
    // 删除之前钩子
    handleFileRemove(file, fileList) {
      this.upload.fileList = fileList;
    },
    // 封装的上传请求
    uploadFile(params) {
      return axios.post(`http://localhost:81/shiro/swpe/permission/uploadOrStartProceBPS`, params,
      )
    },

    // 提交上传文件
    submitFileForm() {
      // 创建新的数据对象
      let formData = new FormData();
      // 将上传的文件放到数据对象中
      this.upload.fileList.forEach(file => {
        formData.append('file', file.raw);
        this.upload.fileName.push(file.name);
      });
      console.log("提交前", formData.getAll('file'));

      // 文件名
      formData.append('fileName', this.upload.fileName);
      // 自定义上传
      console.log(formData);
      this.uploadFile(formData).then(response => {
        console.log(response);
        // if(response.code == 200){
        //   this.$refs.upload.clearFiles();
        //   this.msgSuccess('上传成功！');
        // }else{
        //   this.$message.error(response.msg);
        // }
      })
        .catch(error => {
          this.$message.error('上传失败！');
        });

    },


  }
}