truri vue 上传文件获取文件路径

在Vue.js中，`truri`通常是指`axios`库的一个插件AxiosFileUpload，用于处理文件上传功能。如果你想要在Vue组件中上传文件并获取文件路径，可以按照以下步骤操作：

1. 首先，你需要安装`axios-file-upload`插件。在你的项目目录下运行：

   npm install axios-file-upload

或者如果你使用的是yarn：

   yarn add axios-file-upload

2. 在你的Vue组件中引入axios和AxiosFileUpload，并在`data`选项中配置axios实例：

import axios from 'axios';
import { default as axiosFileUpload } from 'axios-file-upload';

export default {
  data() {
    return {
      axiosInstance: axios.create({
        baseURL: 'your-base-url', // 如果不是默认，设置你的API基础URL
        headers: {'X-Custom-Header': 'foobar'}, // 添加自定义headers
      }),
      fileInput: null,
      filePath: '',
    };
  },
  methods: {
    handleFileUpload(e) {
      const file = e.target.files[0];
      this.fileInput = file;
      
      axiosFileUpload(this.axiosInstance.post('/api/upload', file, {
        onUploadProgress: function(progressEvent) {
          console.log(`Uploading... ${Math.round(progressEvent.loaded * 100 / progressEvent.total)}%`);
        },
      }))
      .then(response => {
        this.filePath = response.data.path; // 文件上传成功后，从响应中获取新路径
        console.log('File uploaded:', this.filePath);
      })
      .catch(error => {
        console.error('Error uploading file:', error);
      });
    },
  },
};

在这个例子中，用户选择文件后，`handleFileUpload`方法会被触发，它会将文件发送到服务器并监听上传进度。文件上传成功后，返回的数据中包含新的文件路径，你可以将其赋值给`filePath`变量。