大文件上传

文件上传

<Modal v-model="modalSetting.show" width="668" :styles="{top: '30px'}" @on-visible-change="doCancel">
    ...
    <Form ref="myForm" :rules="ruleValidate" :model="formItem" :label-width="100" label-position="left">
        <FormItem label="软件版本号" prop="version">
            <Input v-model="formItem.version" placeholder="请填写数字版本号" style="width:300px">Input>
        FormItem>
        ...
        <FormItem label="软件包上传" prop="file">
            // 隐藏的input元素，formItem.file有值时显示，绑定到formItem.file，在表单提交时携带已上传文件的信息。
            <input v-if="formItem.file" v-model="formItem.file" type="hidden" name="file">
            // 上传组件，upload可以在vue实例中被引用
            
                // 此按钮用于触发文件选择对话框，允许用户选择要上传的文件
                <Button icon="ios-cloud-upload-outline">选择软件包上传Button>
            Upload>
        FormItem>
    Form>
    <div slot="footer">
        <Button type="text" @click="cancel" class="margin-right-10">取消Button>
        <Button type="primary" @click="submit" :loading="modalSetting.loading">确定Button>
    div>
Modal>

// 导入了基础 URL 和获取 token 的方法，用于后续的 API 请求
import { baseUrl } from '@/libs/api.request'
import { getToken } from '@/libs/util'
...
export default {
  name: 'SoftwareManage_list',
  data () {
    return {
      ...
      // 定义了上传 URL
      uploadUrl: baseUrl + 'Index/upload',
      // 定义了上传时的请求头
      uploadHeader: { 'Api-Auth': getToken() },
      ...
      formItem: {
        id: 0,
        version: '',
        type: 0,
        description: '',
        // file初始状态为空
        file: ''
      },
      ...
    }
  },
  ...
  methods: {
    ...
    // 文件上传成功
    handleFileSuccess (response) {
      if (response.code === 1) {
        this.$Message.success(response.msg)
        // 显示成功信息并更新 formItem.file 为上传文件的 URL
        this.formItem.file = response.data.fileUrl
      } else {
        this.$Message.error(response.msg)
      }
    },
    // 文件被移除
    onRemoveFile (res) {
      console.log('onremove == ', res)
      // 清空formItem.file
      this.formItem.file = ''
    },
    // 文件大小超出限制，显示警告，提示用户文件过大
    handleFileMaxSize (file) {
      this.$Notice.warning({
        title: '文件大小不合法',
        desc: file.name + '太大啦请上传小于80M的文件。'
      })
    },
    ...
    doCancel (data) {
      if (!data) {
        this.formItem.id = 0
        this.formItem.file = ''
        this.$refs['myForm'].resetFields()
        this.modalSetting.loading = false
        this.modalSetting.index = 0
        // 点击取消，同时要清除已上传的文件
        this.$refs['upload'].clearFiles()
      }
    }
  }
}