上传文件按钮自定义 file

<template>
  <div class="file-upload">
    <label for="file-upload" class="custom-file-upload">
      {{ buttonText }}
    </label>
    <input id="file-upload" type="file" @change="handleFileUpload">
    <button @click="uploadFile">Upload</button>
  </div>
</template>

<style>
.file-upload {
  position: relative;
}

.custom-file-upload {
  display: inline-block;
  padding: 10px 20px;
  background-color: #337ab7;
  color: #fff;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
}

#file-upload {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
}
</style>

<script>
export default {
  data() {
    return {
      buttonText: 'Choose File'
    };
  },
  methods: {
    handleFileUpload(event) {
      // 处理文件上传逻辑
      const file = event.target.files[0];
      console.log(file);
    },
    uploadFile() {
      // 执行文件上传逻辑
    }
  }
}
</script>

前端上传方法

if (this.fileList.length > 0) {
          this.fileList.forEach((item) => {
            // 创建FormData对象
            const formData = new FormData();
            formData.append('file', item);
            // 发送文件上传请求
            axios.post('/api/blade-resource/oss/endpoint/put-file-attach', formData, {
              headers: {
                'Content-Type': 'multipart/form-data'
              }
            })
              .then(response => {
                // 处理上传成功的逻辑
                console.log(response.data);
              })
              .catch(error => {
                // 处理上传失败的逻辑
                console.error(error);
              });
          })
        }