vue elementui，vue3 element plus 文件上传的时候设置其他参数。后台.net接收传递的额外参数。图片上传

电脑版发表于：2021/12/26 17:59

比如上传文件的时候额外传递两个select选择的值
![](https://img.tnblog.net/arcimg/aojiancc2/9934357fa06047e0bf3348da54babbc1.png)

### 前台

前面上传文件的时候要提供默认参数很简单，el-upload绑定一个data即可
```
<el-upload :data="data" > </el-upload>
```
只要data里边有数据，上传的时候会自动回传的，比如我们绑定那个select选择的值
```
data: {
        filePremissonId: "",
        fileTypeId: ""
      }
```
对应的两个select
```
<el-button type="success">选择文件</el-button>
<el-select v-model="data.filePremissonId" style="margin-left:10px" placeholder="访问权限">
  <el-option v-for="item in filePremissons" :key="item.id" :label="item.filePremissonName" :value="item.id" />
</el-select>
<el-select v-model="data.fileTypeId" style="margin-left:10px" placeholder="文件类型">
  <el-option v-for="item in fileTypes" :key="item.id" :label="item.fileTypeName" :value="item.id" />
</el-select>
```

### .net后台接收
使用[FromForm]string fileTypeId这种格式接收就行
```
public string Post(IFormCollection Files, int userId,[FromForm]string fileTypeId, [FromForm]string filePremissonId)
```
或者直接在request里边读取
```
var fileTypeId = Request.Form["fileTypeId"].ToString();
var filePremissonId = Request.Form["filePremissonId"].ToString();
```

### 前台完整一点的代码贴一下
```
<template>
  <el-dialog v-model="dialogFormVisible" :before-close="handleClose" :close-on-click-modal="false" :title="title"
    width="609px">
    <div class="upload">
      <el-alert :closable="false" :title="`支持excel、word、pdf与图片格式，单次可最多选择${limit}个，每个不可大于${size}M，如果大于${size}M会自动为您过滤`"
        type="info" />
      <el-upload ref="uploadRef" accept="image/png,image/jpeg,.xls,.xlsx,.txt,.doc,.docx,.pdf,.ppt,.pptx"
        :action="action" :auto-upload="false" class="upload-content" :close-on-click-modal="false" :data="data"
        :file-list="fileList" :headers="headers" :limit="limit" list-type="text" :multiple="true" :name="name"
        :on-change="handleChange" :on-error="handleError" :on-exceed="handleExceed" :on-preview="handlePreview"
        :on-progress="handleProgress" :on-remove="handleRemove" :on-success="handleSuccess">
        <template #trigger>
          
          
          <el-button type="success">选择文件</el-button>
          <el-select v-model="data.filePremissonId" style="margin-left:10px" placeholder="访问权限">
            <el-option v-for="item in filePremissons" :key="item.id" :label="item.filePremissonName" :value="item.id" />
          </el-select>
          <el-select v-model="data.fileTypeId" style="margin-left:10px" placeholder="文件类型">
            <el-option v-for="item in fileTypes" :key="item.id" :label="item.fileTypeName" :value="item.id" />
          </el-select>
        </template>
        <el-dialog v-model="dialogVisible" append-to-body title="查看大图">
          <div>
            <el-image :src="dialogImageUrl" />
          </div>
        </el-dialog>
      </el-upload>
      
    </div>
    <template #footer>
      <div v-if="show" style="position: absolute; top: 10px; left: 15px; color: #999">
        正在上传中... 当前上传成功数:{{ imgSuccessNum }}张 当前上传失败数:{{
        imgErrorNum
        }}张
      </div>
      <el-button type="danger" @click="handleClose">关闭</el-button>
      <el-button :loading="loading" style="margin-left: 10px" type="primary" @click="submitUpload">
        开始上传
      </el-button>
    </template>
  </el-dialog>
</template>

<script>
import { useUserStore } from '@/store/modules/user'
import { getAllList as getAllFileTypeList } from '@/api/fileTypeManager'
import { ElLoading } from 'element-plus'
import _ from 'lodash'

export default defineComponent({
  name: 'VabUploadFile',
  props: {
    url: {
      type: String,
      default: 'http://localhost:8002/upload222',
      required: true,
    },
    name: {
      type: String,
      default: 'file',
      required: true,
    },
    limit: {
      type: Number,
      default: 20,
      required: true,
    },
    size: {
      type: Number,
      default: 20,
      required: true,
    },
  },
  setup(props, { emit }) {
    const userStore = useUserStore()
    const { token } = storeToRefs(userStore)
    const $baseMessage = inject('$baseMessage')
    let fullscreenLoading = null;
    const state = reactive({
      uploadRef: null,
      show: false,
      loading: false,
      dialogVisible: false,
      dialogImageUrl: '',
      action: '',
      headers: {},
      fileList: [],
      limit: 10,
      size: 10,
      picture: 'picture',
      imgNum: 0,
      allImgNum: 0,
      imgSuccessNum: 0,
      imgErrorNum: 0,
      typeList: null,
      title: '上传',
      dialogFormVisible: false,
      fileTypes: [
        {
          id: '1',
          fileTypeName: 'Option1',
        },
        {
          id: '2',
          fileTypeName: 'Option2',
        },
        {
          id: '3',
          fileTypeName: 'Option3',
        }
      ],
      filePremissons: [
        {
          id: '1',
          filePremissonName: '同部门可见',
        },
        {
          id: '2',
          filePremissonName: '仅自己可见',
        },
        {
          id: '3',
          filePremissonName: '所有人可见',
        }
      ],
      //上传时候可以附带的额外的参数。比如绑定select值的时候可以用里边的方便直接回传
      data: {
        filePremissonId: "",
        fileTypeId: ""
      },
    })

    const submitUpload = () => {

      if (state.allImgNum <= 0) {
        $baseMessage(
          `请选择需要上传的文件，超过10M的文件将无法上传`,
          'warning',
          'vab-hey-message-warning'
        )
        return
      }

      fullscreenLoading = ElLoading.service({
        lock: true,
        text: '文件上传，转换中...',
        background: 'rgba(255, 255, 255, 0.6)',
      })
      state.uploadRef.submit()
    }
    const handleProgress = () => {
      state.loading = true
      state.show = true
    }
    const handleChange = (file, fileList) => {
      if (fileList && fileList.length > 0) {
        if (file.size > 1048576 * state.size) {
          fileList.filter((item) => item !== file)
          state.fileList = fileList
          $baseMessage(
            `文件超过10M了`,
            'warning',
            'vab-hey-message-warning'
          )
        } else {
          state.allImgNum = fileList.length
        }
      }
    }
    const handleSuccess = (response, file, fileList) => {
      state.imgNum = state.imgNum + 1
      state.imgSuccessNum = state.imgSuccessNum + 1

      if (fileList.length === state.imgNum) {
        setTimeout(() => {

          if (fullscreenLoading != null) {
            fullscreenLoading.close();
          }

          $baseMessage(
            `上传完成! 共上传文件${fileList.length}个`,
            'success',
            'vab-hey-message-success'
          )

        }, 1000)
      }

      setTimeout(() => {
        state.loading = false
        state.show = false
      }, 1000)
    }
    const handleError = (err, file) => {
      state.imgNum = state.imgNum + 1
      state.imgErrorNum = state.imgErrorNum + 1
      $baseMessage(
        `文件[${file.raw.name}]上传失败,文件大小为${_.round(
          file.raw.size / 1024,
          0
        )}KB`,
        'error',
        'vab-hey-message-error'
      )

      if (fullscreenLoading != null) {
        fullscreenLoading.close();
      }

      setTimeout(() => {
        state.loading = false
        state.show = false
      }, 1000)
    }
    const handleRemove = () => {
      state.imgNum = state.imgNum - 1
      state.allNum = state.allNum - 1
    }
    const handlePreview = (file) => {
      //alert('选择了文件,点击才会出现的')
      state.dialogImageUrl = file.url
      state.dialogVisible = true
    }
    const handleExceed = (files) => {
      $baseMessage(
        `当前限制选择 ${state.limit} 个文件，本次选择了
                  ${files.length}
                  个文件`,
        'error',
        'vab-hey-message-error'
      )
    }
    const handleShow = (data) => {
      state.title = '上传'
      // console.log(data);
      // console.log("------------------------------------------------------------------------");
      // 这里data没有值的时候不要乱赋值，不然赋值成了undefined就有问题了
      // state.data = data     
      state.dialogFormVisible = true
    }
    //点击关闭文件
    const handleClose = () => {
      state.fileList = []
      state.picture = 'picture'
      state.allImgNum = 0
      state.imgNum = 0
      state.imgSuccessNum = 0
      state.imgErrorNum = 0
      state.headers['Authorization'] = `Bearer ${token.value}`
      state.dialogFormVisible = false

      //重写执行一次调用这个组件的页面的查询方法，刷新数据
      emit('fetch-data')
    }

    //获取文件类型
    const fetchAllFileType = async () => {
      const {
        data: { list },
      } = await getAllFileTypeList(state.queryForm)
      state.fileTypes = list
    }

    onMounted(() => {
      fetchAllFileType()
      console.log(token)
      console.log(token.value)
      //给token 原来的写法，token是一个对象，传回去传不到token，就验证不通过
      //state.headers['Authorization'] = `Bearer ${token}`
      //要点里边的value才是里边的token
      state.headers['Authorization'] = `Bearer ${token.value}`
      console.log(props.url)
      //这里给上传地址
      state.action = props.url
    })

    const percentage = computed(() => {
      if (state.allImgNum === 0) return 0
      return _.round(state.imgNum / state.allImgNum, 2) * 100
    })

    return {
      ...toRefs(state),
      submitUpload,
      handleProgress,
      handleChange,
      handleSuccess,
      handleError,
      handleRemove,
      handlePreview,
      fetchAllFileType,
      handleExceed,
      handleShow,
      handleClose,
      percentage,
    }
  },
})
</script>

<style lang="scss" scoped>
.upload {
  height: 366px;

  .upload-content {
    .el-upload__tip {
      display: block;
      height: 30px;
      line-height: 30px;
    }

    :deep() {
      .el-upload--picture-card {
        width: 128px;
        height: 128px;
        margin: 3px 8px 8px 8px;
        border: 2px dashed #c0ccda;

        .ri-add-line {
          font-size: 24px;
        }
      }

      .el-upload-list--picture {
        margin-bottom: 20px;
      }

      .el-upload-list--picture-card {
        .el-upload-list__item {
          width: 128px;
          height: 128px;
          margin: 3px 8px 8px 8px;
        }
      }
    }
  }
}
</style>
```

剑轩

vue elementui，vue3 element plus 文件上传的时候设置其他参数。后台.net接收传递的额外参数。图片上传

{{item.title}}