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


Posted in Javascript onAugust 12, 2020

首先安装依赖

cnpm install ali-oss

封装client

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

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

<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>

const OSS = require('ali-oss')

export function client(data) {
 // 后端提供数据
 return new OSS({
  region: data.endpoint, // *****.aliyuncs.com
  accessKeyId: data.accessKeyId,
  accessKeySecret: data.accessKeySecret,
  bucket: data.bucketName,
  endpoint: data.endpoint,
  secure: true
 })
}

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

结果如下图:

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

1、HTML部分

<el-upload
 action=""
 :http-request="Upload"
 :data="Aliyun"
 :multiple="false"
 :show-file-list="true"
 list-type="picture-card"
 :on-preview="handlePictureCardPreview"
 :on-remove="handleRemove"
 :limit="5"
>
 <i class="el-icon-plus" />
</el-upload>
<el-dialog :visible.sync="dialogVisible">
 <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
<p style="color: #999;">图片上传限制: 1.最多5张; 2.最大1M</p>

2、JS部分

import { getAliyun, createOrder } from '@/api/order-management'
import { client } from '@/utils/alioss'
export default {
 name: 'Appeal',
 data() {
  return {
   dialogImageUrl: '',
   dialogVisible: false,
   Aliyun: {}, // 存签名信息
   progress: 0, // 进度条
   imgUrl: [] // 存上传后的图片url
  }
 },
 created() {
  this.getAliyun()
 },
 methods: {
  // 获取阿里云数据
  async getAliyun() {
   const { data } = await getAliyun()
   this.Aliyun = data
  },
  // 上传图片
  Upload(file) {
   const that = this
   // 判断扩展名
   const tmpcnt = file.file.name.lastIndexOf('.')
   const exname = file.file.name.substring(tmpcnt + 1)
   const names = ['jpg', 'jpeg', 'png']
   if (names.indexOf(exname) < 0) {
    this.$message.error('不支持的格式!')
    return
   }
   if (file.size > 1024 * 1024) {
    this.$message.error('图片大小最大1M')
    return
   }
   async function multipartUpload() {
    // const fileName = that.name + file.file.uid
    const fileName = 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.dialogImageUrl = 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.dialogImageUrl = file.url
   this.dialogVisible = true
  },
  // 删除图片
  handleRemove(file, fileList) {
   // console.log(file)
   for (var i in this.imgUrl) {
    if (this.imgUrl[i].name === file.name) {
     this.imgUrl.splice(i, 1)
    }
   }
  }
 }
}
</script>

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

<template>
  <div class="basicInfo">
   <el-upload class="avatar-content"
    v-loading="fileLoading"
    accept="image/*"
    drag action="https://zxcity-app.oss-cn-hangzhou.aliyuncs.com"
    :show-file-list="false"
    :data="ossParams"
    :before-upload="checkParams"
    :on-progress="progress"
    :on-error="uploadErr"
    :on-success="uploadSuccess"
    :on-remove="fileListRemove"
    multiple
    >
   </el-upload>
   <div v-for="(item,index) in fileList" :key="index" class="imgDiv">
    <img :src="item.imgUrl" alt="">
    <p>{{item.progress}}</p>
   </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
 data () {
  return {
   form: {
    url: ''
   },
   fileList: [],
   fileLoading: false,
   ossParams: {
    expireTime: '',
    key: '',
    dir: ''
   }
  }
 },
 methods: {
  // 图片上传前检测参数变化
  checkParams (file) {
   var _this = this
   var promise = new Promise((resolve, reject) => {
    axios.get('https://share.zxtest.izxcs.com/zxcity_restful/ws/oss/ossUpload', {})
     .then(function (response) {
      var params = response.data
      _this.ossParams = params
      _this.ossParams.name = file.name
      _this.ossParams.OSSAccessKeyId = params.accessid
      _this.ossParams.success_action_status = '200'
      _this.ossParams.key = params.dir + '/' + _this.getUUID()
      var obj = {
       name: _this.ossParams.name,
       key: _this.ossParams.key,
       host: _this.ossParams.host,
       progress: 0,
       imgUrl: ''
      }
      _this.fileList.push(obj)
      // _this.fileLoading = true
      resolve()
     })
     .catch(function (error) {
      console.log(error, '错误')
      reject(error)
     })
   })
   return promise
  },
  // 上传中
  progress (event, file, fileList) {
   console.log('上传中...')
   console.log(file)
   console.log(fileList)
   this.fileList.forEach((item, index) => {
    if (item.name === file.name) {
     item.progress = parseInt(file.percentage)
    }
   })
  },
  // 上传失败提示
  uploadErr (res) {
   this.$message.error('上传出错!')
  },
  // 上传成功后上传到file表
  uploadSuccess (response, file, fileList) {
   console.log('上传成功')
   this.fileList.forEach((item, index) => {
    if (item.name === file.name) {
     item.imgUrl = item.host + '/' + item.key
     item.progress = 100
    }
   })
  },
  // 文件删除
  fileListRemove (file, fileList) {
   this.form.url = ''
  },
  // 随机名称
  getUUID () {
   return `${this.str4()}${this.str4()}-${this.str4()}-${this.str4()}-${this.str4()}-${this.str4()}${this.str4()}${this.str4()}`
  },
  str4 () {
   return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
  }
 }
}
</script>
<style lang="less" scoped>
.imgDiv{
 display: block;
 float: left;
 width: 80px;
 height: 100px;
 border: 2px solid black;
 img{
  display: block;
  width: 50px;
  height: 80px;
 }
 p{
  font-size: 14px;
  text-align: center;
 }
}
</style>

以上这篇VUE 实现element upload上传图片到阿里云就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
几个比较经典常用的jQuery小技巧
Mar 01 Javascript
在新窗口打开超链接的方法小结
Apr 14 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
Jul 11 Javascript
Vue组件选项props实例详解
Aug 18 Javascript
JavaScript实现QQ列表展开收缩扩展功能
Oct 30 Javascript
JavaScript登录验证基础教程
Nov 01 Javascript
深入理解node.js http模块
Jan 24 Javascript
Vue实现动态创建和删除数据的方法
Mar 17 Javascript
详解Vue.js v-for不支持IE9的解决方法
Dec 29 Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 Javascript
vue路由守卫及路由守卫无限循环问题详析
Sep 05 Javascript
JavaScript中的类型检查
Feb 03 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
Aug 12 #Javascript
vue-router 2.0 跳转之router.push()用法说明
Aug 12 #Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
Aug 12 #Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
Aug 13 #Javascript
VsCode里的Vue模板的实现
Aug 12 #Javascript
typescript配置alias的详细步骤
Aug 12 #Javascript
js实现表格单列按字母排序
Aug 12 #Javascript
You might like
40年前的这部特摄片恐龙特级克塞号80后的共同回忆
2020/03/08 日漫
PHP实时显示输出
2008/10/02 PHP
解析如何用php screw加密php源代码
2013/06/20 PHP
使用swoole扩展php websocket示例
2014/02/13 PHP
php求斐波那契数的两种实现方式【递归与递推】
2019/09/09 PHP
js null,undefined,字符串小结
2010/08/21 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
javascript引用赋值(地址传值)用法实例
2015/01/13 Javascript
简介AngularJS的视图功能应用
2015/06/17 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
2015/09/27 Javascript
jquery trigger实现联动的方法
2016/02/29 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
2016/03/31 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
2016/09/05 Javascript
JavaScript触发onScroll事件的函数节流详解
2016/12/14 Javascript
d3.js中冷门却实用的内置函数总结
2017/02/04 Javascript
Node.JS文件系统解析实例详解
2017/05/15 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
JS三级联动代码格式实例详解
2019/12/30 Javascript
[38:51]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-CDEC
2014/05/22 DOTA
[50:48]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python库urllib与urllib2主要区别分析
2014/07/13 Python
python处理csv数据的方法
2015/03/11 Python
python GUI库图形界面开发之PyQt5状态栏控件QStatusBar详细使用方法实例
2020/02/28 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
jupyter notebook实现显示行号
2020/04/13 Python
python爬虫请求头设置代码
2020/07/28 Python
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
计算机工程学院个人求职信
2013/10/05 职场文书
播音主持女孩的自我评价分享
2013/11/20 职场文书
运动会稿件300字
2014/02/14 职场文书
学生抄袭作业的检讨书
2014/10/02 职场文书
2014年小学数学教师工作总结
2014/12/03 职场文书
2015社区精神文明建设工作总结
2015/04/21 职场文书
公司催款律师函
2015/05/27 职场文书