VUE 实现element upload上传图片到阿里云

2023-07-18 21:41:03 492

首先安装依赖

cnpminstallali-oss

封装client

若是想减小打包后静态资源大小，可在index.html引入：（然后在client.js里注释掉constOSS=require(‘ali-oss')）


constOSS=require('ali-oss')

exportfunctionclient(data){
//后端提供数据
returnnewOSS({
region:data.endpoint,//*****.aliyuncs.com
accessKeyId:data.accessKeyId,
accessKeySecret:data.accessKeySecret,
bucket:data.bucketName,
endpoint:data.endpoint,
secure:true
})
}

然后，在vue页面引用，给client传入后台返回的阿里数据

结果如下图：

1、HTML部分







图片上传限制：1.最多5张；2.最大1M

2、JS部分

import{getAliyun,createOrder}from'@/api/order-management'
import{client}from'@/utils/alioss'
exportdefault{
name:'Appeal',
data(){
return{
https://www.haoziyuan.ccdialogImageUrl:'',
dialogVisible:false,
Aliyun:{},//存签名信息
progress:0,//进度条
imgUrl:[]//存上传后的图片url
}
},
created(){
this.getAliyun()
},
methods:{
//获取阿里云数据
asyncgetAliyun(){
const{data}=awaitgetAliyun()
this.Aliyun=data
},
//上传图片
Upload(file){
constthat=this
//判断扩展名
consttmpcnt=file.file.name.lastIndexOf('.')
constexname=file.file.name.substring(tmpcnt+1)
constnames=['jpg','jpeg','png']
if(names.indexOf(exname)<0){
this.$message.error('不支持的格式!')
return
}
if(file.size>1024*1024){
this.$message.error('图片大小最大1M')
return
}
asyncfunctionmultipartUpload(){
//constfileName=that.name+file.file.uid
constfileName=that.Aliyun.objectName++'/'+Date.now()+'-'+file.file.name
//fileName=aliyunConfig.objectName+'/'+Date.now()+'-'+file.name//所要上传的文件名拼接(test/)
//定义唯一的文件名，打印出来的uid其实就是时间戳
//client是第一步中的client
client(that.Aliyun).put(fileName,file.file,
{
progress:function(p){//获取进度条的值
console.log(p)
that.progress=p*100
}
}).then(
result=>{
//下面是如果对返回结果再进行处理，根据项目需要
//console.log(result)
//that.imgUrl='http://'+result.bucket+'.'+that.Aliyun.endpoint+'/'+result.name
that.https://www.haoziyuan.ccdialogImageUrl=result.url
that.imgUrl.push({
name:file.file.name,
url:result.url
})
console.log(that.imgUrl)
}).catch(err=>{
console.log('err:',err)
})
}
multipartUpload()
},
//图片预览
handlePictureCardPreview(file){
this.https://www.haoziyuan.ccdialogImageUrl=file.url
this.dialogVisible=true
},
//删除图片
handleRemove(file,fileList){
//console.log(file)
for(variinthis.imgUrl){
if(this.imgUrl[i].name===file.name){
this.imgUrl.splice(i,1)
}
}
}
}
}

补充知识：vue-cli项目中，配合element_ui来实现上传图片与视频到oss上。




.imgDiv{
display:block;
float:left;
width:80px;
height:100px;
border:2pxsolidblack;
img{
display:block;
width:50px;
height:80px;
}
p{
font-size:14px;
text-align:center;
}
}

以上这篇VUE实现elementupload上传图片到阿里云就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

VUE 实现element upload上传图片到阿里云

热门推荐

随机推荐