1.上傳單張圖片
效果：
創建oss.js介面組態檔
import request from '@/utils/re.js' //封裝的請求檔案
import axios from 'axios'
export function policy1() {
return request({
url:'url',//介面地址
method:'get',
})
}
在components下創建singleUpload.vue組件
<template>
<div>
<!-- 上傳單張圖片 -->
<el-upload action="填寫OSS域名"
:data="dataObj"
class="avatar-uploader"
:file-list="fileList"
:show-file-list="false"
:on-remove="handleRemove"
:on-success="handleUploadSuccess"
:before-upload="beforeUpload">
<img :preview-src-list="dialogImageUrlArr" :width="w" :height="h" v-if="dialogImageUrl" :src="dialogImageUrl" alt="" class="avatar">
<i v-else :style="{fontSize: '18px',fontWeight:'bold',padding:paddings}" class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
</template>
<script>
import {policy1} from '@/api/oss'
export default {
name: 'SingleUpload',
props: {
value:{
type:String
},
w:{
type:String,
// default:'100px'
},
h:{
type:String,
// default:'100px'
},
paddings:{
type:String,
}
},
data() {
return {
dataObj: {
policy: '',
signature: '',
key: '',
ossaccessKeyId: '',
dir: '',
host: ''
},
dialogVisible: false,
dialogImageUrl: null,
dialogImageUrlArr:[],
}
},
mounted() {
console.log(this.fileList)
},
computed: {
imageUrl() {
console.log("修改圖",this.value);
if(this.value){
this.dialogImageUrl=this.value;
}else{
this.dialogImageUrl='';
}
return this.value;
},
imageName() {
if (this.value != null && this.value !== '') {
return this.value.substr(this.value.lastIndexOf('/') + 1)
} else {
return null
}
},
fileList() {
return [{
name: this.imageName,
url: this.imageUrl
}]
},
showFileList: {
get: function() {
return this.value !== null && this.value !== '' && this.value !== undefined
},
set: function(newValue) {
}
}
},
methods: {
emitInput(val) {
this.$emit('input', val)
},
handleRemove(file, fileList) {
this.emitInput('')
},
handlePreview(file) {
this.dialogVisible = true
},
getUUID() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
})
},
beforeUpload(file) {
console.log("獲取資料前",file);
const _self = this
return new Promise((resolve, reject) => {
policy1().then(response => {
_self.dataObj.policy = response.data.policy;
_self.dataObj.signature = response.data.signature;
_self.dataObj.ossaccessKeyId = response.data.accessKeyId;
_self.dataObj.key = response.data.dir +this.getUUID()+ '_${filename}';
_self.dataObj.dir = response.data.dir;
_self.dataObj.host = response.data.host;
_self.dataObj.callback = response.data.callback;
resolve(true)
}).catch(err => {
console.log(err)
reject(false)
})
})
},
handleUploadSuccess(res, file) {
console.log('上傳成功...')
this.showFileList = true
this.fileList.pop();
this.dialogImageUrl = this.dataObj.host + '/' + this.dataObj.key.replace('${filename}', file.name);
this.dialogImageUrlArr.push(this.dialogImageUrl);
console.log("成功",res);
// this.emitInput(this.dialogImageUrl)
this.emitInput(this.dialogImageUrl)
}
}
}
</script>
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
/* width: 100%; */
/* height: 100%; */
/* line-height: 178px; */
text-align: center;
}
.avatar {
/* width: 178px; */
/* height: 178px; */
display: block;
}
</style>
上傳多張圖片至oss
效果:效果回顯還有一些問題，就是回顯的時候會出現閃動，不影響使用，但是體驗效果有點不佳，如果有小伙伴完善了，可以給我指導一下嗎（主要懶了啊啊啊），謝恩~~~~~
<template>
<div>
<!-- 上傳多張圖片 -->
<el-upload action="填寫oss域名"
:data="dataObj"
list-type="picture-card"
:file-list="fileList"
:on-remove="handleRemove"
:on-success="handleUploadSuccess"
:before-upload="beforeUpload"
:limit="maxCount"
:on-exceed="handleExceed">
<i class="el-icon-plus" :style="{fontSize: '18px',fontWeight:'bold',padding:paddings}"></i>
</el-upload>
</div>
</template>
<script>
import {
policy1
} from '@/api/oss'
export default {
name: 'SingleUpload',
props: {
value: Array,
//最大上傳圖片數量
maxCount: {
type: Number,
default: 5
},
w:{
type:String,
// default:'100px'
},
h:{
type:String,
// default:'100px'
},
paddings:{
type:String,
}
},
data() {
return {
dataObj: {
policy: '',
signature: '',
key: '',
ossaccessKeyId: '',
dir: '',
host: ''
},
dialogVisible: false,
dialogImageUrl: null
}
},
computed: {
fileList() {
let fileList = [];
for (let i = 0; i < this.value.length; i++) {
fileList.push({
url: this.value[i]
});
}
return fileList;
}
},
methods: {
getUUID() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
})
},
emitInput(fileList) {
let value=[];
for(let i=0;i<fileList.length;i++){
value.push(fileList[i].url);
}
this.$emit('input', value)
},
handleRemove(file, fileList) {
this.emitInput(fileList)
},
handleUploadSuccess(res, file) {
console.log('獲取圖片',res.data);
let url = this.dataObj.host +'/'+ this.dataObj.key.replace('${filename}', file.name);
console.log('路徑',url);
// if(!this.useOss){
// //不使用oss直接獲取圖片路徑
// url = res.data.url;
// }
this.fileList.push({
name: file.name,
url: url
});
this.emitInput(this.fileList);
},
beforeUpload(file) {
const _self = this
return new Promise((resolve, reject) => {
policy1().then(response => {
console.log("獲取資料", response.data);
_self.dataObj.policy = response.data.policy;
// console.log('policy值',response.data.policy);
_self.dataObj.signature = response.data.signature;
// console.log('signature值',response.data.signature);
_self.dataObj.ossaccessKeyId = response.data.accessKeyId;
// console.log('ossaccessKeyId值',response.data.accessKeyId);
_self.dataObj.key = response.data.dir + this.getUUID() + '_${filename}';
console.log('圖片--->key值',response.data.dir + this.getUUID() + '_${filename}');
_self.dataObj.dir = response.data.dir;
console.log('圖片--->dir值',response.data.dir);
_self.dataObj.host = response.data.host;
console.log('圖片--->host值',response.data.host);
_self.dataObj.callback = response.data.callback;
resolve(true)
}).catch(err => {
console.log(err)
reject(false)
})
})
},
handlePreview(file) {
console.log('獲取圖片',file.url);
this.dialogVisible = true;
this.dialogImageUrl = file.url;
},
handleExceed(files, fileList) {
this.$message({
message: '最多只能上傳' + this.maxCount + '張圖片',
type: 'warning',
duration: 1000
});
},
}
}
</script>
<style>
</style>
上傳本地視頻至oss
在之前的oss.js檔案后添加
export function getUUID () {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
})
}
export function ossUpload (file,editor) {
var that = this;
return new Promise((resolve, reject) => {
policy1().then((response) => {
const formData = new FormData()
//后端回傳的key和密匙...
formData.append('OSSAccessKeyId', response.data.accessKeyId)
formData.append('policy', response.data.policy)
formData.append('signature', response.data.signature)
formData.append('key', response.data.dir +getUUID() +'_'+ file.name)
formData.append('callback', response.data.callback)
formData.append('file', file)
formData.append('host',response.data.host)
//回呼
axios.post(response.data.host, formData).then((res) => {
const { status } = res
if (status === 200) {
console.log('200',res)
//上傳成功后，后臺回傳圖片路徑，將圖片插入富文本中
editor.cmd.do('insertHTML', `<img src=${res.data.data.filename} alt="">`)
return res.data
} else {
}
}).catch(err => {
console.log(1111,err)
})
}).catch(err => {})
})
}
創建videoUpload.vue組件
效果：
<template>
<div style="display: inline-flex;">
<div class="img-list-item common mb_10" v-for="(item,index) in dialogImageUrl">
<video width="150px" height="150px" style="padding: 0 5px;" controls="controls" :src="item"> 您的瀏覽器不支持視頻播放</video>
<i class="del-img" @click="forkImage(index)"></i>
</div>
<el-upload action="填寫oss域名"
:data="dataObj" :show-file-list="false"
:auto-upload="true"
:on-remove="handleRemove"
:on-success="handleUploadSuccess"
:before-upload="beforeUpload"
:limit="maxCount"
accept=".mp4"
:on-exceed="handleExceed"
:on-progress="uploadVideoProcess">
<span class="warp">
<el-progress v-if="videoFlag == true" type="circle" :percentage="videoUploadPercent" style="margin-top:30px;position: relative;top: -15px;">
</el-progress>
<i v-else class="el-icon-plus" :style="{fontSize: '18px',fontWeight:'bold',padding:paddings,position:'relative',top:'60px'}"></i>
</span>
</el-upload>
</div>
</template>
<script>
import {
policy1
} from '@/api/oss'
export default {
props: {
value: Array,
//最大上傳圖片數量
maxCount: {
type: Number,
default: 5
},
w: {
type: String,
// default:'100px'
},
h: {
type: String,
// default:'100px'
},
paddings: {
type: String,
}
},
data: function() {
return {
videoFlag: false,
videoUploadPercent: 0,
videis: false,
dataObj: {
policy: '',
signature: '',
key: '',
ossaccessKeyId: '',
dir: '',
host: ''
},
dialogVisible: false,
dialogImageUrl: []
}
},
computed: {
fileList() {
let fileList = [];
for (let i = 0; i < this.value.length; i++) {
fileList.push({
url: this.value[i]
});
}
console.log('視頻---->', fileList);
console.log('視頻22222222222222---->', this.dialogImageUrl);
return fileList;
}
},
methods: {
//洗掉視頻
forkImage(index) {
// console.log('當前索引', index);
this.dialogImageUrl.splice(index, 1);
// console.log('洗掉后的陣列陣列', this.dialogImageUrl);
},
getUUID() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
})
},
emitInput(fileList) {
let value = [];
for (let i = 0; i < fileList.length; i++) {
value.push(fileList[i].url);
}
this.$emit('input', value)
},
handleRemove(file, fileList) {
this.emitInput(fileList)
},
handleUploadSuccess(res, file) {
// console.log("成功后", file)
// console.log('獲取圖片', res.data);
let url = this.dataObj.host + '/' + this.dataObj.key.replace('${filename}', file.name);
// console.log('路徑', url);
this.fileList.push({
name: file.name,
url: url
});
this.dialogVisible = true;
this.dialogImageUrl.push(url);
// console.log("視頻地址", this.);
this.emitInput(this.fileList);
this.videoFlag = false;
this.videoUploadPercent = 0;
},
uploadVideoProcess(event, file, fileList) {
this.videoFlag = true;
this.videoUploadPercent = Math.floor(event.percent);
},
beforeUpload(file) {
var fileSize = file.size / 1024 / 1024 < 100;
console.log('視頻大小', fileSize);
if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov'].indexOf(file.type) ==
-1) {
this.$message({
type: 'warning',
message: '請上傳正確的視頻格式'
});
return false;
}
if (!fileSize) {
this.$message({
type: 'warning',
message: '視頻大小不能超過100MB'
});
return false;
}
this.videoFlag = true;
console.log("上傳視頻值", file);
const _self = this
return new Promise((resolve, reject) => {
policy1().then(response => {
console.log("視頻---->獲取資料", response.data);
_self.dataObj.policy = response.data.policy;
// console.log('policy值',response.data.policy);
_self.dataObj.signature = response.data.signature;
// console.log('signature值',response.data.signature);
_self.dataObj.ossaccessKeyId = response.data.accessKeyId;
// console.log('ossaccessKeyId值',response.data.accessKeyId);
_self.dataObj.key = response.data.dir + this.getUUID() + '_${filename}';
console.log('視頻---->key值', response.data.dir + this.getUUID() + '_${filename}');
_self.dataObj.dir = response.data.dir;
console.log('視頻---->dir值', response.data.dir);
_self.dataObj.host = response.data.host;
_self.dataObj.callback = response.data.callback;
resolve(true)
}).catch(err => {
console.log(err)
reject(false)
})
})
},
handlePreview(file) {
// console.log('獲取視頻', file.url);
this.dialogVisible = true;
this.dialogImageUrl = file.url;
},
handleExceed(files, fileList) {
// console.log("獲取上傳視頻", files, fileList);
this.$message({
message: '最多只能上傳' + this.maxCount + '個視頻',
type: 'warning',
duration: 1000
});
},
}
}
</script>
<style lang="scss" scoped>
.warp {
display: inline-block;
// padding: 54px 64px;
width: 150px;
height: 151px;
border: 1px dashed #DEE5ED;
}
/deep/.el-upload-list {
display: none;
}
.el-upload-video {
width: 149px;
height: 149px;
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.el-upload-video-i {
font-size: 20px;
font-weight: bold;
padding-top: 43px;
color: #8c939d;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
}
//視頻
.img-list-item {
position: relative;
margin: auto;
}
// .img-list-item img {
// box-sizing: border-box;
// vertical-align: middle;
// border: 0;
// }
.img-list-item i.del-img {
width: 20px;
height: 20px;
display: inline-block;
background: rgba(0, 0, 0, .6);
background-image: url(../assets/images/close.png);//洗掉圖片
background-size: 18px;
background-repeat: no-repeat;
background-position: 50%;
position: absolute;
top: 0;
right: -1px;
}
</style>
前端小白在此請各位大佬多多指教鴨！！！！記得給我點個贊喲！！！
查看oss各地域名
查看資料：https://blog.csdn.net/weixin_45495667/article/details/111588974?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-3&spm=1001.2101.3001.4242
https://blog.csdn.net/qq_38997036/article/details/107591742
看過很多資料和其它博主寫的，有些網址找不到了，有原創若看到，可以私聊我喲！轉發請注明原創
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/249492.html
標籤：其他
上一篇：HBuilderX快速上手
下一篇：JS實作資料結構（五）：集合