最近有个需求 需要上传文件至 ali-oss 并且是多个el-upload 组件 通过接口循环出来的 并在点击提交按钮的同时将所有上传的文件统一上传至阿里云

效果展示

项目的框架是vue 选择的方案是 element-ui（el-upload）也就是饿了么ui框架里的 upload组件

就按照官方文档一步步来

1. 安装ali-oss

npm install ali-oss

2. 引入 ali-oss

import OSS from "ali-oss";

3. 初始化 OSS 对象

stsToken 此属性我没添加，只是写出来给你们看下，一般只需要定义
region
accessKeyId
accessKeySecret
bucket

data() {
	return {
		config: {
			// yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou
	        region: "oss-cn-hangzhou",
	        // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）找后端要去。
	        accessKeyId: "yourAccessKeyId",
	        accessKeySecret: "yourAccessKeySecret",
	        // 从STS服务获取的安全令牌（SecurityToken）使用STS临时授权访问OSS的情况下，才需要上传stsToken，否则可以不定义。没有的可以不传 不定义这一个属性
	        stsToken: 'yourSecurityToken',
	        // 填写Bucket名称。
	        bucket: "kemao-resp-signup-oss",
      },
	}
}

methods: {
	init() {
      return new OSS(this.config);
    },
}

4. 根据el-upload 组件的事件 将所有上传的文件添加至一个数组记录下来

//uploadFile 事件 是 el-upload 自带的事件 
//文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
uploadFile({ file }, id) {
      this.fileArr.push({
        file,
        id // id 属性 是我最后跟后台对接需要传的参数，这里就一并记录在数组里
      });
      // unique 是自己定义的数组去重函数 因为 可能会传相同的文件 要做去重
      this.fileArr = this.unique(this.fileArr);
}

5. 调用ali-oss 的上传方法 上传文件

ossPut(file) {
      return new Promise((resolve, reject) => {
      	// 因为需求需要自定义文件名 所以 写了一个修改文件名的方法
        let fileName = this.modifyFileName(file);
        this.init().put(
            this.ruleForm.batch_Id + "/" + this.ruleForm.scc + "/" + fileName,
            file.file
          )
          .then(({ res, url }) => {
            if (res && res.status == 200) {
              console.log("阿里云OSS上传文件成功回调", res, url);
              resolve(res, url);
            }
          })
          .catch((err) => {
            console.log("阿里云OSS上传文件失败回调", err);
            reject(err);
          });
      });
    },

上传文件的方法就是OSS对象的 put 方法
put方法传两个参数，第一个参数是你在bucket中的定义的文件名称，第二个参数就是你要传的文件

举个例子就是 你要传 apple.png(file) 在 bucket 下的 picture/fruit文件夹下 就是这样写

this.init().put('picture/fruit', file) //file 就是apple.png 文件

.then 可以打印 上传成功的凭证

6. 最后将所有文件一并上传至 ali-oss 只需要循环一下就行

	//最后的点击上传事件
	submit() {
	//fileArr 就是之前自定义的 存储文件的数组
      this.fileArr.forEach((item) => {
        this.ossPut(item).then((res) => {
          console.log(res);
        });
      });
    },

这样就可以循环多个el-upload 组件 并且将文件一次性传入 ali-oss 中