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 相关文章推荐
JS效率个人经验谈(8-15更新),加入range技巧
Jan 09 Javascript
jQuery+css+html实现页面遮罩弹出框
Mar 21 Javascript
js动态移动滚动条至底部示例代码
Apr 24 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 Javascript
基于JS设计12306登录页面
Dec 28 Javascript
vue+vuex+axios实现登录、注册页权限拦截
Mar 09 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
May 22 Javascript
Vue press 支持图片放大功能的实例代码
Nov 09 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
Dec 28 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
three.js搭建室内场景教程
Dec 30 Javascript
JavaScript实现PC端横向轮播图
Feb 07 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
NT IIS下用ODBC连接数据库
2006/10/09 PHP
PHP 异步执行方法,模拟多线程的应用分析
2013/06/03 PHP
回帖脱衣服的图片实现代码
2014/02/15 PHP
php使用fsockopen函数发送post,get请求获取网页内容的方法
2014/11/15 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
Jquery中使用setInterval和setTimeout的方法
2013/04/08 Javascript
JQuery悬停控制图片轮播——代码简单
2015/08/05 Javascript
js仿黑客帝国字母掉落效果代码分享
2020/11/08 Javascript
常用Javascript函数与原型功能收藏(必看篇)
2016/10/09 Javascript
ASP.NET jquery ajax传递参数的实例
2016/11/02 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
2016/12/15 Javascript
bootstrap table实现单击单元格可编辑功能
2017/03/28 Javascript
使用vue-cli编写vue插件的方法
2018/02/26 Javascript
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
深入浅析angular和vue还有jquery的区别
2018/08/13 jQuery
微信小程序实现打卡日历功能
2020/09/21 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
2018/12/11 jQuery
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
2019/04/04 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
2019/05/28 Javascript
Vue路由 重定向和别名的区别说明
2020/09/09 Javascript
[02:40]DOTA2超级联赛专访430 从小就爱玩对抗性游戏
2013/06/18 DOTA
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
Python实现的简单算术游戏实例
2015/05/26 Python
pandas数值计算与排序方法
2018/04/12 Python
Python列表list排列组合操作示例
2018/12/18 Python
python实现差分隐私Laplace机制详解
2019/11/25 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
关于中国梦的演讲稿
2014/04/23 职场文书
群众路线对照检查材料思想汇报怎么写
2014/09/18 职场文书
小学班主任自我评价
2015/03/11 职场文书
初二数学教学反思
2016/02/17 职场文书
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/06 其他游戏