关于#前端#的问题：怎么用Element-ui的上传文件的功能获取到上传文件的 文件的 绝对路径

怎么用Element-ui的上传文件的功能获取到上传文件的 文件的 绝对路径

上传成功后，让后端返回对应的文件路径

• 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7778165
• 这篇博客也不错, 你可以看下element-ui 上传文件配置
• 除此之外, 这篇博客: element-ui上传多个文件，只请求一次相应处理中的 element-ui上传多个文件，只请求一次相应处理 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 

  有些参数和方法都是自己项目里面使用的（element中有参数说明），不用管，只管最关键的:auto-upload=“false”=>:auto-upload="true"和:file-list的一个数组
  

  <el-upload
    v-if="pageLeftBtn"
     ref="uploadBtn"
     :multiple="true"
     :action="uploadURL"
     :name="fileKey"
     :with-credentials="true"
     :show-file-list="false"
     :on-success="handleUploadSuccess"
     :on-error="handleUploadError"
     :on-preview="handlePreview"
     :before-upload="handleBeforeUpload"
     :auto-upload="false"
     :file-list="uploadedList"
     :disabled="disabled || isLoading"
     :limit="limit"
   >
     <el-button
       class="btn"
       type="primary"
       :loading="isLoading"
       :disabled="disabled"
       icon="el-icon-upload"
       @click="clearUploadList"
       >请选择上传文件</el-button>
   </el-upload>
   <el-button class="btn" type="primary" @click="handleUploadFileList">确定上传</el-button>
  

      handleUploadFileList () {
        let formData = new FormData()
        this.uploadedList.forEach((_) => {
          formData.append('file', _.raw)
        })
        console.log(formData)
        // TO DO
        // 如果调用submit()方法，又会是多文件分开上传
        // this.$refs.uploadBtn.submit()
        // ... 接下来直接发送请求就行了
        // 列如
        axios
        // TO DO 
        // 需要什么参数就传递什么参数
        .post(`//172.0.0.1:8080/upload?test=${this.test}`,formData,
            { headers: { 'Content-Type': 'multipart/form-data' } }
          )
          .then((r) => {
            console.log(r)
          })
          .catch((e) => {
            console.log(e)
          })
       // 期间需要做判断，比如说大小控制等加上判断即可
      },
  

• 以下回答由chatgpt基于相关博客总结生成:

  根据问题的描述，使用Element-ui的上传文件功能来获取上传文件的绝对路径。

  Element-ui中的上传文件组件是el-upload，它提供了一些属性和事件，可以用于获取上传文件的相关信息。

  首先，需要在页面中引入Element-ui的upload组件，并添加相应的配置。

  <template>
    <el-upload
      class="upload-demo"
      ref="upload"
      :action="uploadUrl"
      :before-upload="beforeUpload"
      :on-success="onSuccess"
    >
      <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
  </template>
  
  <script>
  export default {
    data() {
      return {
        uploadUrl: 'your-upload-url', // 替换为实际的上传接口地址
        absolutePath: '' // 用于保存上传文件的绝对路径
      };
    },
    methods: {
      beforeUpload(file) {
        // 获取文件的绝对路径
        this.absolutePath = file.path;
      },
      onSuccess(response, file) {
        // 上传成功后的处理
        console.log('上传成功');
      }
    }
  };
  </script>
  

  在以上代码中，我们定义了一个el-upload组件，指定了上传的url地址，配置了before-upload和on-success回调函数。

  在beforeUpload回调函数中，我们可以通过file对象的path属性获取上传文件的绝对路径，并将其保存在data中的absolutePath属性中。

  在onSuccess回调函数中，可以处理图片上传成功后的逻辑，如显示上传成功的提示信息等。

  这样，通过Element-ui的上传文件功能，就可以获取上传文件的绝对路径了。

  参考资料： Element UI - Upload 上传文件 Element UI - Upload 事件和方法 Vue - $refs