vue+element-ui，用el-upload实现阿里云Oss文件上传

Vue.js 和 Element UI 结合可以方便地构建用户界面，Element UI 的 `el-upload` 组件恰好提供了一个现成的解决方案来处理文件上传，包括阿里云 OSS（Object Storage Service）。以下是使用 `el-upload` 实现阿里云OSS文件上传的基本步骤：

1. **安装依赖**:
首先，在 Vue 项目中安装 `ali-oss` 和 `axios`，它们分别是阿里云OSS的官方客户端库和用于发送HTTP请求的库：

   npm install ali-oss axios

2. **配置阿里云OSS**:
在你的项目中创建一个 `.env` 或者使用配置文件，添加阿里云访问信息，如 Access Key、Secret Key 和 bucket名称等：

   # .env or config.js
   ALI_OSS_ACCESS_KEY_ID=your_access_key_id
   ALI_OSS_SECRET_ACCESS_KEY=your_secret_access_key
   ALI_OSS_BUCKET_NAME=your_bucket_name

3. **初始化OSS实例**:
在你的 Vue 组件里，导入必要的库，并使用环境变量初始化一个 OSS 对象：

   import OSS from 'ali-oss';
   const ossClient = new OSS({
     accessKeyId: process.env.ALI_OSS_ACCESS_KEY_ID,
     secretAccessKey: process.env.ALI_OSS_SECRET_ACCESS_KEY,
     endpoint: 'http://oss-cn-hangzhou.aliyuncs.com', // 使用你所在区域的endpoint
   });

4. **`el-upload` 组件配置**:
将 `el-upload` 组件设置好，监听 `onSuccess` 事件并处理上传后的回调：

   <template>
     <el-upload
       :action="uploadUrl"
       :on-success="handleSuccess"
       :before-upload="beforeUpload"
       ref="upload"
       multiple
     >
       <i class="el-icon-upload"></i> Click to Upload
     </el-upload>
   </template>

   <script>
   export default {
     data() {
       return {
         uploadUrl: '', // 这里需要拼接完整的上传URL，比如ossClient.putFile方法的结果
         // 其他可能用到的变量
       };
     },
     methods: {
       handleSuccess(response, file) {
         console.log('文件 ' + file.name + ' 上传成功');
         ossClient.signURL(file.name).then(url => this.uploadUrl = url); // 获取上传到OSS的短链接
       },
       beforeUpload(file) {
         if (file.size > 1024 * 1024 * 5) { // 设置最大文件大小限制
           message.error('File size exceeds the limit!');
           return false;
         }
         return true;
       },
     },
   };
   </script>

5. **完整上传流程**:
- 当用户选择文件后，组件会触发 `beforeUpload` 函数验证文件是否合法；
- 如果合法，发起上传请求到 `uploadUrl`（通常由后端生成，这里仅作示例）；
- 文件上传成功后，`handleSuccess` 会被调用，获取上传成功的 URL 并更新到页面上。