vue图片上传到oss

npm

npm install ali-oss

alioss.js

// var OSS = require('ali-oss');
import OSS from "ali-oss";
export function client() {
  var client = new OSS({
    endpoint: '', //填写Bucket所在地域，需填
    accessKeyId: '',//需填
    accessKeySecret: '',//需填
    bucket: '', // 填写Bucket名称。需填
		enable: true
  }) //后端提供数据
  return client
}
const headers = {
  // 指定该Object被下载时的网页缓存行为。
  // "Cache-Control": "no-cache",
  // 指定该Object被下载时的名称。
  // "Content-Disposition": "example.txt",
  // 指定该Object被下载时的内容编码格式。
  // "Content-Encoding": "utf-8",
  // 指定过期时间，单位为毫秒。
  // Expires: "1000",
  // 指定Object的存储类型。
  // "x-oss-storage-class": "Standard",
  // 指定Object的访问权限。
  'x-oss-object-acl': 'public-read',
  // 指定Object标签，可同时设置多个标签。
  // "x-oss-tagging": "Tag1=1&Tag2=2",
  // 指定初始化分片上传时是否覆盖同名Object。此处设置为true，表示禁止覆盖同名Object。
  // "x-oss-forbid-overwrite": "true",
 
}
export {
  headers
}

ant vue二次封装的upload组件

<template>
	<div>
		<a-upload name="file" list-type="picture-card" class="avatar-uploader"
			:before-upload="beforeUpload" :multiple="multiple" :file-list="fileList" :disabled="disabled"
			@change="handleChange" @preview="preview">
			<div class="occupy" v-if="(fileList.length == 0 || multiple) && showPlus" :style="{width: `${widthSize}`,height: `${heightSize}`}">
				<a-icon type="plus" />
			</div>
		</a-upload>
		<div class="tip">
			{{tip}}
		</div>
		<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
			<img alt="example" style="width: 100%" :src="previewImage" />
		</a-modal>
	</div>
</template>
<script>
	import {client,	getFileNameUUID} from '@/utils/alioss.js'
	export default {
		props: {
			value: {
				type: String,
				default: "",
			},
			dir: {
				type: String,
				default: "",
			},
			tip: {
				type: String,
				default: "",
			},
			widthSize: {
				type: [Number, String],
				default: "100px",
			},
			heightSize: {
				type: [Number, String],
				default: "100px",
			},
			lineSize: {
				type: [Number, String],
				default: "178px",
			},
			//上传类型 图片、视频
			upType:{
				type: String,
				default: "img"
			},
			//是否支持多选文件
			multiple:{
				type:Boolean,
				default:false
			},
			//已上传的图片、视频 对象的url、name、uid都要有，不然会报错
			fileList:{
				type:Array,
				default:[]
			},
			//是否禁用
			disabled:{
				type:Boolean,
				default:false
			},
			showPlus:{
				type:Boolean,
				default:true
			}
		},
		computed: {
			style() {
				return `width:${this.widthSize};height:${this.heightSize};line-height:${this.lineSize};`
			},
		},
		data() {
			return {
				previewImage:'',
				previewVisible:false,
				dataObj: {
					policy: "",
					signature: "",
					key: "",
					OSSAccessKeyId: "",
					dir: "",
					host: "",
				},
			};
		},
		methods: {
			//关闭弹窗-放大查看图片
			handleCancel(){
				this.previewVisible = false
				this.previewImage = ''
			},
			//放大查看图片
			preview(e){
				this.previewImage = e.url
				this.previewVisible = true
			},
			handleChange(e){
				if(e.file.status == 'removed'){//删除图片
					this.$emit('del',e.file.uid)
				}else{
					let fileName;
					if(this.upType == 'video'){// image/banner 这个自己定义，oss的文件夹与文件的前缀名称（前缀可要可不要）
						fileName = 'image/'+'banner' + `${getFileNameUUID()}` + '.mp4';
					}else{
						fileName = 'image/'+'banner' + `${getFileNameUUID()}` + '.jpg';
					}
					client().multipartUpload(fileName,e.file).then(res=>{
						let ur = `https://***.aliyuncs.com/${fileName}` //拼接返回的文件名组成整个oss文件地址
						this.$emit('save',[ur])
					})
				}
			},
			beforeUpload(file) {
				const reader = new FileReader()
				// 把Array Buffer转化为blob 如果是base64不需要
				// 转化为base64
				reader.readAsDataURL(file)
				reader.onload = () => {}
				// 转化为blob
				// reader.readAsArrayBuffer(file)
			},
		},
	};
</script>
<style scoped>
	.occupy{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.tip{
		color:#999;
	}
	.avatar-uploader .ant-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .ant-upload:hover {
		border-color: #409eff;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		/* width: 178px;
  height: 178px;
  line-height: 178px; */
		text-align: center;
	}

	.avatar {
		/* width: 178px;
  height: 178px;
  line-height: 178px; */
		display: block;
	}

	.add-pay {
		cursor: pointer;
		font-size: 20px;
		margin: 0 10px;
	}

	.del-pay {
		cursor: pointer;
		font-size: 20px;
		margin-left: 10px;
		color: red;
	}
</style>

因为ant vue的upload组件file-list是一个数组，并且需要name和uid与url，不然显示不出来，所以自定义name和uid即可

this.fileList = [
	{
		url:url,
		name:getFileNameUUID(), //getFileNameUUID()随机生成uuid
		uid:getFileNameUUID()
	}
]