VUE如何实现元素上传上传图片到阿里云的案例

　　介绍

这篇文章将为大家详细讲解有关VUE如何实现元素上传上传图片到阿里云的案例,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

首先安装依赖

cnpm安装ali-oss

封装客户端

VUE如何实现元素上传上传图片到阿里云的案例

若是想减小打包后静态资源大小,可在index . html引入:(然后在客户端。js里注释掉const OSS=要求(“ali-oss& # 39;)

& lt;脚本https://www.yisu.com/zixun/src=" http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js "> 

 
 
 1, HTML部分
  & lt; el-upload
　　action=啊?
　　:http请求=癠pload"
　　:数据=https://www.yisu.com/zixun/鞍⒗锇桶汀?
　　:多个=" false "
　　:show-file-list=" true "
　　列表类型=叭送放啤?
　　:on-preview=" handlePictureCardPreview”
　　:“移动”=癶andleRemove”
　　:限制=?”>
　　<我类=" el-icon-plus "/>
　　
　　
　　
　　
　　
图片上传限制:1。最多5张;2。最大1 m

2, JS部分

进口{getAliyun, createOrder} & # 39; @/api/订单管理# 39;
　　从& # 39;进口{客户}@/跑龙套alioss& # 39;
　　出口默认{
　　名称:& # 39;上诉# 39;
　　数据(){
　　返回{
　　dialogImageUrl: & # 39; & # 39;
　　dialogVisible:假的,
　　阿里巴巴:{},//存签名信息
　　进展:0,//进度条
　　imgUrl:[]//存上传后的图片url
　　}
　　}，
　　创建(){
　　this.getAliyun ()
　　}，
　　方法:{//获取阿里云数据
　　异步getAliyun () {
　　const{数据}=等待getAliyun ()
　　这一点。王坚=数据
　　}，//上传图片
　　上传(文件){
　　const=这//判断扩展名
　　const tmpcnt=file.file.name.lastIndexOf(& # 39; # 39;公司)
　　const exname=file.file.name.substring (tmpcnt + 1)
　　常量名称=[& # 39;jpg # 39; & # 39; jpeg # 39;, & # 39; png # 39;】
　　如果(names.indexOf (exname) & lt;0){
　　美元。message.error(& # 39;不支持的格式! & # 39;)
　　返回
　　}
　　如果文件。大小比;1024 * 1024){
　　美元。message.error(& # 39;图片大小最大猴1 # 39;)
　　返回
　　}
　　异步函数multipartUpload () {//const文件名=that.name + file.file.uid
　　const文件名=that.Aliyun。objectName + + & # 39;/& # 39;+ Date.now () + & # 39; & # 39;+ file.file.name//文件名=aliyunConfig.objectName + & # 39;/& # 39; + Date.now () + & # 39; & # 39; + file.name//所要上传的文件名拼接(测试/)//定义唯一的文件名,打印出来的uid其实就是时间戳//客户端是第一步中的客户机
　　客户端(that.Aliyun)。put (file.file文件名,
　　{
　　进展:函数(p){//获取进度条的值
　　console.log (p)
　　那进步=p * 100
　　}
　　})(
　　结果=比;{//下面是如果对返回结果再进行处理,根据项目需要//console.log(结果)//mgUrl=& # 39; http://& # 39;+的结果。桶+ & # 39;强生# 39;+ that.Aliyun。端点+ & # 39;/& # 39;+ result.name
　　那dialogImageUrl=result.url
　　that.imgUrl.push ({
　　名称:file.file.name,
　　url: result.url
　　}）
　　console.log (that.imgUrl)
　　})。抓住(呃=比;{
　　console.log(& # 39;犯错:& # 39;,犯错)
　　}）
　　}
　　multipartUpload ()
　　}，//图片预览
　　handlePictureCardPreview(文件){
　　这一点。dialogImageUrl=file.url
　　这一点。dialogVisible=true
　　}，//删除图片
　　handleRemove(文件,文件列表){//console.log(文件)
　　我在this.imgUrl (var) {
　　如果(this.imgUrl[我]. name===file.name) {
　　this.imgUrl。拼接(我,1)
　　}
　　}
　　}
　　}
　　}
　　& lt;/script>

<强> vue-cli项目中,配合element_ui来实现上传图片与视频到操作系统上。

& lt; template> 　　& lt; div类=癰asicInfo"祝辞 　　& lt; el-upload类=癮vatar-content" 　　v-loading=癴ileLoading" 　　接受=巴枷?*”; 　　拖动action=癶ttps://zxcity-app.oss-cn-hangzhou.aliyuncs.com" 　　:show-file-list=癴alse" 　　:数据=https://www.yisu.com/zixun/皁ssParams” 　　:before-upload=" checkParams” 　　:进展=敖健? 　　:中的=" uploadErr” 　　:成功=" uploadSuccess” 　　:“移动”=癴ileListRemove” 　　多个> 　　

VUE如何实现元素上传上传图片到阿里云的案例