vue 和el-upload结合 axios 实现上文件

可以通过以下步骤来实现：

1. 安装 `axios`, `vue` 和 `element-ui`。

   npm install axios vue element-ui --save

2. 在 `main.js` 文件中引入和使用 `element-ui`。

   import Vue from 'vue'
   import ElementUI from 'element-ui'
   import 'element-ui/lib/theme-chalk/index.css'
   
   Vue.use(ElementUI)

3. 在需要上传文件的组件中，使用 `el-upload` 组件。

   <template>
     <el-upload
       class="upload-demo"
       action="/api/upload"
       :before-upload="beforeUpload"
       :on-success="onSuccess"
       :on-error="onError"
       :headers="{ Authorization: 'Bearer ' + token }"
       multiple>
       <el-button 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 {
         token: 'your-token'
       }
     },
     methods: {
       beforeUpload(file) {
         const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
         const isLt500K = file.size / 1024 < 500
   
         if (!isJPG) {
           this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
         }
         if (!isLt500K) {
           this.$message.error('上传头像图片大小不能超过 500KB!')
         }
   
         return isJPG && isLt500K
       },
       onSuccess(response, file, fileList) {
         this.$message.success('上传成功!')
       },
       onError(error, file, fileList) {
         this.$message.error('上传失败!')
       }
     }
   }
   </script>

4. 在 `beforeUpload` 方法中，可以对文件进行验证和处理。例如，只允许上传 jpg/png 格式的图片，并且大小不能超过 500KB。

5. 在 `onSuccess` 和 `onError` 方法中，可以处理上传成功和失败的情况。

6. 在 `headers` 中设置请求头，例如在此处设置了 `Authorization` 头部，用于传递 Token 信息。

7. 在 `action` 中设置上传的接口地址。

8. 在服务端接口中，可以使用 `multer` 模块来处理上传的文件。例如：

   const express = require('express')
   const multer = require('multer')
   
   const app = express()
   
   const storage = multer.diskStorage({
     destination: function (req, file, cb) {
       cb(null, 'uploads/')
     },
     filename: function (req, file, cb) {
       cb(null, file.originalname)
     }
   })
   
   const upload = multer({ storage: storage })
   
   app.post('/api/upload', upload.single('file'), (req, res) => {
     res.send({ success: true })
   })
   
   app.listen(3000, () => console.log('Server started on port 3000'))

在此处，通过 `multer` 模块设置了上传文件的存放路径和文件名，并在路由中使用 `upload.single('file')` 方法来处理上传的文件。最后返回上传成功的信息。