vue调用阿里云oss图片上传多张

在Vue中调用阿里云OSS进行多张图片上传，可以按照以下步骤进行操作：

1. 在你的Vue项目中安装ali-oss和element-ui（可选）依赖：

npm install ali-oss element-ui

2. 在你的Vue组件中引入所需的库和样式：

import OSS from 'ali-oss';
import { Message, Upload } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

3. 创建OSS客户端实例并配置连接参数：

const client = new OSS({
  region: '<your-oss-region>',
  accessKeyId: '<your-access-key-id>',
  accessKeySecret: '<your-access-key-secret>',
  bucket: '<your-bucket-name>'
});

确保替换 `<your-oss-region>`, `<your-access-key-id>`, `<your-access-key-secret>` 和 `<your-bucket-name>` 为你自己的阿里云OSS相关信息。

4. 在模板中使用element-ui的Upload组件来实现图片上传：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action=""
      :auto-upload="false"
      :on-change="handleFileChange"
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="handleUpload">上传到OSS</el-button>
    </el-upload>
  </div>
</template>

5. 在Vue组件的methods中实现文件选择和上传的逻辑：

methods: {
  handleFileChange(fileList) {
    this.fileList = fileList;
  },
  handleUpload() {
    this.fileList.forEach(file => {
      const fileName = file.name;
      client.put(fileName, file)
        .then(() => {
          Message.success(`${fileName} 上传成功`);
        })
        .catch(error => {
          Message.error(`${fileName} 上传失败：${error}`);
        });
    });
  }
}

以上代码中的`fileList`是一个存放选择的文件列表的数组，可以在data中定义并初始化为空数组。

通过以上步骤，你就可以在Vue中调用阿里云OSS进行多张图片上传了。请确保你的阿里云OSS配置正确，并根据具体需求进行适当的定制。