如何借助与el-upload的http-request属性实现文件上传

`el-upload` 是 Element UI 提供的一个用于文件上传的功能组件，在 Vue.js 中非常常见。要借助 `http-request` 属性实现文件上传，你需要按照以下步骤操作：

1. 首先，引入 Element UI，并在你的 Vue 组件中安装并注册 `ElUpload` 组件：

   <script src="https://unpkg.com/element-ui@2.15.1/dist/index.js"></script>

2. 然后，在你的模板中使用 `el-upload` 标签，设置 `http-request` 属性指向一个处理文件上传的函数，这个函数通常会发送 HTTP 请求到服务器：

   <el-upload
     ref="upload"
     :action="uploadUrl" <!-- 这里替换为你的实际上传地址 -->
     http-request="handleFileUpload"
     :on-success="handleSuccess"
     :on-error="handleError"
   >
     <i class="el-icon-upload"></i> 手动上传
   </el-upload>

3. 创建对应的 JavaScript 函数来处理文件上传，这里以 Axios 为例：

   import axios from 'axios';

   export default {
     data() {
       return {
         uploadUrl: 'your-api-url', // 你的文件上传 API URL
       };
     },
     methods: {
       handleFileUpload(file) {
         const formData = new FormData();
         formData.append('file', file);

         axios.post(this.uploadUrl, formData)
           .then(response => {
             this.handleSuccess(response.data);
           })
           .catch(error => {
             this.handleError(error);
           });
       },
       // 成功回调
       handleSuccess(response) {
         console.log('文件上传成功', response);
       },
       // 错误回调
       handleError(error) {
         console.error('文件上传失败', error);
       },
     },
   };

4. 上述代码中，`handleFileUpload` 函数创建了一个 `FormData` 对象，然后将其附加上文件数据，并使用 Axios 发送 POST 请求。服务器响应会被传递给 `handleSuccess` 或者错误处理函数。