VUE上传图片携带其他参数

1.点击添加项目图表按钮

 代码部分html

   <el-button type="primary" @click="addProjectIconDiag()"
        >添加项目图标</el-button
      >
    </div>

js

  data(){
    return{
          // 添加项目图标对话框
      addProjectIcon: false,
    }
   },
// 打开项目图标对话框
    addProjectIconDiag() {    
        this.addProjectIcon = true    
    },

2.弹出添加项目图标对话框

代码部分html

  <el-dialog
      title="添加项目图标"
      :visible.sync="addProjectIcon"
      :close-on-click-modal="false"
      width="50%"
    >
      <input type="file" class="file" ref="upload" />

      <span slot="footer" class="dialog-footer">
        <el-button @click="addProjectIcon = false">取 消</el-button>
        <el-button type="primary" @click="addProjectIconImg()">确 定</el-button>
      </span>
    </el-dialog>

 js

async addProjectIconImg() {

      let myfile = this.$refs.upload
      let files = myfile.files

      if (files.length == 0) {
        this.$message.error('请选择文件')
        return false
      }
      let file = files[0]
      let formdata = new FormData() //formdata格式
      formdata.append('file', file) //图片文件
      formdata.append('proId', this.projectSelection[0].id) //项目id(需要传递的参数)
      const res = await this.$http.post('上传图片接口', formdata)
      if (res.data.success == false) {
        this.$message.error('上传失败')
      } else {
        this.$message({
          message: '上传成功',
          type: 'success',
        })
        this.addProjectIcon = false
        this.getProjectList()
      }
    },