循环列表中使用ul-upload上传文件

需求分析：在备案的时候需要提交材料，但是每个阶段可能需要提交的材料是变化的，为了应对这种变化，将准备资料弄成动态的， 然后申请每一项备案的时候动态加载，然后上传对应的附件。

 vue使用element组件，代码如下：

<el-divider content-position="center">新产品备案附件管理信息</el-divider>
        <div v-for="(item,index) in prelist" :key="index" style="width:100%;padding:5px;">
          <span style="height: 40px;line-height: 40px;">{{item.name}}</span>
          <el-form-item>
            <el-upload 
              :headers="headers" 
              :file-list="item.pFileList" 
              action="#" 
              :before-upload="beforeUpload" 
              :http-request="(file)=>{return fileUpload(file,item)}" 
              :on-remove="(file)=>{return handleRemove(file,item)}" 
              :on-preview="preview" 
              accept=".jpg, .png,.pdf">
              <el-button size="small" type="primary" icon="el-icon-upload" v-show="flag!=='查看'">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </div>

 数据定义及方法如下：（没有精简，直接贴的代码），关键看后台逻辑怎么实现，前端主要是配合后台接口，我这里是将每一项对应的文件上传完之后统一向数据库提交。

<script>
import BHeader from "@/views/components/baiyin_header/header.vue";
import { listFilings, getFilings, delFilings, addFilings, updateFilings,auditing, upload, download } from "@/api/product/filings";
import { listPreparationforProduct, plistforUpdate } from "@/api/product/preparation";

export default {
  name: "Filings",
  components:{BHeader},
  dicts: ['new_product_filings_status'],
  data() {
    return {
      headers: { "Content-Type": "multipart/form-data" },
      filingsList: [],
      // 新产品备案附件管理表格数据
      pFileList: [],
      prelist:[],//准备资料列表
      // 弹出层标题
      title: "",
      flag:"",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        pName: null,
        status: null
      },
      // 表单参数
      form: {
        pFileList:[]
      },
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleDownload(row){
      this.$download.resource(row.registry_path);
    },
    beforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 30
      if (!isRightSize) {
        this.$modal.msgError("文件大小超过 30MB")
      }
      return isRightSize
    },
    preview(file) {
      let link = document.createElement('a')
      link.style.display = 'none'
      link.style.cursor = 'pointer;'
      link.href = process.env.VUE_APP_BASE_API + file.path
      link.target = '-blank'
      link.click()
    },
    // 文件上传
    fileUpload(fileObj,item) {
      let cur = this
      let formData = new FormData();
      formData.set('file', fileObj.file);
      upload(formData).then((data) => {
        this.pFileList.push({
          fName:fileObj.file.name,
          fPath:data.fileName,
          fType:fileObj.file.type,
          pPreId:item.id
        })
        cur.$modal.msgSuccess("上传成功");
      })
      this.form.pFileList = this.pFileList
    },
    // 文件列表
    itemFileList(item){
      return item.f_name
    },
    handleRemove(file, item) {
      this.pFileList = this.pFileList.filter(i=>{
          return (i.name !== file.name) && (i.id !== file.id)
      });
    },
    /** 查询新产品备案列表 */
    getList() {
      this.loading = true;
      listFilings(this.queryParams).then(response => {
        this.filingsList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        pName: null,
        pDescribe: null,
        pFileList:[],
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        status: "0"
      };
      this.pFileList = [];
      this.resetForm("form");
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加新产品备案";
      listPreparationforProduct().then(res=>{
        this.prelist = res;
      })
    },
    /** 修改按钮操作 */
    handleUpdate(row,title) {
      this.reset();
      this.flag = title
      const id = row.id || this.ids
      plistforUpdate(id).then(res=>{
        this.prelist = res;
      })
      getFilings(id).then(response => {
        this.form = response.data;
        this.pFileList = response.data.pFileList;
        this.open = true;
        this.title = title + "新产品备案信息";
      });
    },
    // 提交审核
    handleSubmit(row){
      let params = {
        id:row.id,
        status:'1'
      }
      auditing(params).then(response => {
        this.$modal.msgSuccess("提交成功");
        this.getList();
      });
    },
    /** 提交 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.status = '1'
          this.form.pFileList = this.pFileList;
          if (this.form.id != null) {
            updateFilings(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addFilings(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    // 保存
    saveForm(){
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.pFileList = this.pFileList;
          console.log(this.form)
          if (this.form.id != null) {
            updateFilings(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addFilings(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除新产品备案编号为"' + ids + '"的数据项？').then(function() {
        return delFilings(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
	/** 新产品备案附件管理序号 */
    rowPFileIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    /** 新产品备案附件管理添加按钮操作 */
    handleAddPFile() {
      let obj = {};
      obj.fName = "";
      obj.fPath = "";
      obj.fType = "";
      this.pFileList.push(obj);
    },
    /** 新产品备案附件管理删除按钮操作 */
    handleDeletePFile() {
      if (this.checkedPFile.length == 0) {
        this.$modal.msgError("请先选择要删除的新产品备案附件管理数据");
      } else {
        const pFileList = this.pFileList;
        const checkedPFile = this.checkedPFile;
        this.pFileList = pFileList.filter(function(item) {
          return checkedPFile.indexOf(item.index) == -1
        });
      }
    },
    /** 复选框选中数据 */
    handlePFileSelectionChange(selection) {
      this.checkedPFile = selection.map(item => item.index)
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('product/filings/export', {
        ...this.queryParams
      }, `filings_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>

以上代码仅作为经验记录，知识分享，如有不对，敬请大家指正！