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 = falsethis.previewImage = ''},//放大查看图片preview(e){this.previewImage = e.urlthis.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不需要// 转化为base64reader.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()随机生成uuiduid:getFileNameUUID()}
]
