vue(web) uniapp(兼容APP,小程序,H5) 阿里云oss上传

WEB上传封装

<template>
  <div class="uploadVideo">
    <div class="videoBox" v-if="!url && !isUp">
      <div class="upVideo" @click="inputChange">
        <i class="el-icon-plus"></i>
      </div>
    </div>
    <div class="videoBox">
      <el-progress v-if="isUp" type="circle" :width="200" :percentage="videoUploadPercent"></el-progress>
    </div>
    <video id="vide" v-if="url" :src="url" class="videoAvatar" controls="controls"></video>
    <div class="optionBtn">
      <el-button type="primary" size="small" @click="inputChange" v-if="url">重新上传</el-button>
      <el-button type="danger" size="small" @click="cancelUp" v-if="isUp">取消上传</el-button>
    </div>
    <p class="Upload_pictures">
      <span>最多可以上传1个视频，建议大小50M，推荐格式mp4,点击视频重新上传</span>
    </p>
    <input class="inputer" ref="inputer" type="file" accept="video/*" @change="httpRequest" />
  </div>
</template>

<script>
import OSS from 'ali-oss'
import {
  v4 as uuidv4
} from "uuid"
import api from '@/api'
export default {
  props: {
    VideoPath: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      uploadImgUrl: process.env.VUE_APP_API + "upload-video", // 上传的视频服务器地址
      videoFlag: false,
      videoUploadPercent: 0,
      cancel: false,
      isUp: false,
      url: '',
      client: null
    };
  },
  created() {

  },
  watch: {
    VideoPath(val) {
      this.url = val
    },
  },
  methods: {
    async httpRequest() {
      this.isUp = true
      this.videoUploadPercent = 0
      this.url = ''
      this.$emit('Change', '')
      let that = this
      let file = this.$refs.inputer.files[0]
      var fileSize = file.size / 1024 / 1024 < 1000;
      if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov'].indexOf(file.type) == -1) {
        this.$notify.warning({
          title: "警告",
          message: "请上传正确的视频格式",
        });
        return false;
      }
      if (!fileSize) {
        this.$notify.warning({
          title: "警告",
          message: "视频大小不能超过1000MB",
        });
        return false;
      }
      const { data } = await api.uploadParams()
      if (!data.accessKeyID) {
        return
      }
      this.client = new OSS({
        region: data.region,
        bucket: data.bucket,
        stsToken: data.stsToken,
        accessKeyId: data.accessKeyID, //AccessKey
        accessKeySecret: data.accessKeySecret, //秘钥
      });
      const suffix = file.name.substr(file.name.indexOf('.'))

      let url = '/video/' + uuidv4() + suffix
      const options = {
        // 获取分片上传进度、断点和返回值。
        progress: (p, cpt, res) => {
          this.videoUploadPercent = Math.floor(p * 100)
          console.log(cpt)
          if (this.cancel) {
            this.client.abortMultipartUpload(cpt.name, cpt.uploadId)
            this.cancel = false
          }
        },
        // 设置并发上传的分片数量。
        parallel: 4,
        // 设置分片大小。默认值为1 MB，最小值为100 KB。
        partSize: 1024 * 1024,
        // headers,
        // 自定义元数据，通过HeadObject接口可以获取Object的元数据。
        // meta: { year: 2020, people: "test" },
        mime: "text/plain",
      };
      try {
        const {
          res,
          name
        } = await this.client.multipartUpload(url, file, options)
        if (res.status == 200) {
          let videoUrl = 'https://y-video.ibookgames.com' + name
          that.onSuccess(videoUrl)
        }
      } catch (e) {
        that.onError('上传失败');
      }
    },
    inputChange() {
      this.$refs.inputer.click()
    },
    onError(e) {
      this.url = ''
      this.isUp = false
      this.$emit('Change', '')
    },
    onSuccess(e) {
      this.url = e
      this.isUp = false
      this.$emit('Change', e)
    },
    cancelUp(e) {
      this.$refs.inputer.value = ''
      this.cancel = true
    },

  }
};
</script>

<style  scoped>
.uploadVideo {
  display: flex;
  flex-direction: column;
}

.videoAvatar {
  width: 200px;
}

.optionBtn {
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

.upVideo {
  width: 200px;
  height: 100px;
  border: 1px dashed#999999;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  position: relative;
}


.el-icon-plus {
  font-size: 40px;
  color: #999999;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.inputer {
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
</style>

调用

<uploadImage :limit="6" ref="adtiveUp" @getUrl="ShowUrl($event, '自己需要携带的参数')"
            @delUrl="ShowUrl($event, '自己需要携带的参数')" />

UNIAPP上传封装

import utils from '@/utils/utils.js';
import store from '@/store'
import crypto from 'crypto-js';
import api from '@/request/index'
import {
	v4 as uuidv4
} from 'uuid';
import {
	Base64
} from 'js-base64'
// #ifdef APP-VUE
import permision from "@/common/permission.js"
// #endif
class Upload {
	constructor(arg) {
		this.uploadUrl = ''; // 上传文件地址
		this.uploadList = []; // 上传文件列表
		this.uploadCurrentIndex = 0; // 上传到第几个文件
		this.uploadParams = {}; //上传参数
		this.uploadLoading = true; //上传动画默认为true
		this.sourceType = []; //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
		this.sizeType = []; //original 原图，compressed 压缩图，默认二者都有
	}
	// 选择图片
	choiceImg() {

		const that = this;
		uni.chooseImage({
			count: that.uploadParams.MaxNumber,
			sourceType: this.sourceType,
			sizeType: this.sizeType,
			async success(res) {
				const tempFilePaths = res.tempFilePaths;
				that.uploadList = res.tempFiles;
				if (that.uploadParams.MaxNumber && (that.uploadParams.MaxNumber < tempFilePaths.length)) {
					utils.TextToast('超出文件上传最大数量' + that.uploadParams.MaxNumber);
					that.ressetUpload();
				} else {
					that.uploadData();
				}
			},
			fail(err) {
				if (err.errMsg.indexOf('cancel') === -1) {
					utils.TextToast('选择相册失败');
					console.error(err);
				}
			},
			complete() {
				that.hideLoading();
			}
		});
	}
	upLoading(msg) {
		utils.showLoading(msg || '上传中...', true)
	}
	hideLoading() {
		utils.hideLoading();
	}
	// 上传文件
	async uploadData() {
		const that = this;
		that.uploadLoading && that.upLoading();
		let data = that.uploadParams.params
		let fileData = that.uploadList[that.uploadCurrentIndex]
		// 图片大小
		const imgSize = fileData.size
		if (imgSize > 10485760) {
			utils.TextToast("图片超出大小限制，图片不得大于10M")
			return false;
		}
		let newName = fileData.name || fileData.path
		let name = uuidv4() + newName.substr(newName.lastIndexOf('.'))
		let pramsData = await that.getFormDataParams()
		uni.getImageInfo({
			src: fileData.path,
			complete(image) {
				uni.uploadFile({
					url: that.uploadUrl,
					filePath: fileData.path,
					formData: {
						...pramsData,
						key: name,
						'success_action_status': '200',
					},
					fileType: 'image',
					name: 'file',
					success: (res) => {
						const {
							successBack,
							failBack,
							complateBack,
							callback
						} = that.uploadParams;
						if (res.statusCode === 200) {
							let url = that.uploadUrl + '/' + name
							successBack(url);
							// 根据 that.uploadCurrentIndex 判断是否需要继续上传图片
							if (that.uploadCurrentIndex < that.uploadList.length - 1) {
								that.uploadCurrentIndex += 1;
								that.uploadData();
							} else {
								that.ressetUpload();
								callback && callback();
							}
						} else {
							that.ressetUpload();
							failBack(data);
						}
						complateBack && complateBack(res);
					},
					fail(err) {
						that.ressetUpload();
						utils.TextToast('上传图片失败');
						console.log(err);
					}
				});
			}
		});
	}
	computeSignature(accessKeySecret, canonicalString) {
		return crypto.enc.Base64.stringify(crypto.HmacSHA1(canonicalString, accessKeySecret));
	}
	async getFormDataParams() {
		const date = new Date();
		date.setHours(date.getHours() + 1);
		const policyText = {
			expiration: date.toISOString(), // 设置policy过期时间。
			conditions: [
				// 限制上传大小。
				["content-length-range", 0, 1024 * 1024 * 1024],
			],
		};
		const credentials = await api('init.uploadParams')
		this.uploadUrl = credentials.data.endpoint
		const policy = Base64.encode(JSON.stringify(policyText)) // policy必须为base64的string。
		const signature = this.computeSignature(credentials.data.accessKeySecret, policy)
		const formData = {
			OSSAccessKeyId: credentials.data.accessKeyID,
			signature,
			policy,
			'x-oss-security-token': credentials.data.stsToken
		}
		return formData
	}
	// 上传完成后重置数据
	ressetUpload() {
		this.uploadCurrentIndex = 0;
		this.uploadList = [];
		this.uploadLoading && this.hideLoading();
	}
	async uploadMetod(paramsData) {
		if (typeof paramsData !== 'object') {
			throw Error('upload params is must a object');
		}
		this.uploadParams = paramsData;
		this.uploadLoading = paramsData.uploadLoading !== undefined ? paramsData.uploadLoading : true;
		this.sourceType = paramsData.sourceType !== undefined ? paramsData.sourceType : ['album', 'camera'];
		this.sizeType = paramsData.sizeType !== undefined ? paramsData.sizeType : ['original', 'compressed'];
		this.choiceImg();
	}
}
export default new Upload()

调用

// 上传图片
			async UploadImgs() {
				let that = this
				ossUp.uploadMetod({
					MaxNumber: 1,
					successBack(res) {
						that.userInfo.bg_pic = res
						that.setBg()
					},
					callback(res) {},
					failBack(err) {
						that.$utils.TextToast(err.message);
					},
				});
			},