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 相关文章推荐
Prototype Date对象 学习
Jul 12 Javascript
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
不提示直接关闭网页窗口的JS示例代码
Dec 17 Javascript
JavaScript语言对Unicode字符集的支持详解
Dec 30 Javascript
Node.js 条形码识别程序构建思路详解
Feb 14 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
浅谈angular2 组件的生命周期钩子
Aug 12 Javascript
微信小程序 上传头像的实例详解
Oct 27 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
Mar 15 Javascript
angularJs中$scope数据序列化的实例
Sep 30 Javascript
详解Vue CLI 3.0脚手架如何mock数据
Nov 23 Javascript
小程序实现列表多个批量倒计时
Jan 29 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
2019十大人气国漫
2020/03/13 国漫
在php中取得image按钮传递的name值
2006/10/09 PHP
php 无法载入mysql扩展
2010/03/12 PHP
php将HTML表格每行每列转为数组实现采集表格数据的方法
2015/04/03 PHP
解决Laravel5.5下的toArray问题
2019/10/15 PHP
父窗口获取弹出子窗口文本框的值
2006/06/27 Javascript
js控制框架刷新
2008/08/01 Javascript
js计算页面刷新的次数
2009/07/20 Javascript
写给想学习Javascript的朋友一点学习经验小结
2010/11/23 Javascript
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
jquery实现省市select下拉框的替换(示例代码)
2014/02/22 Javascript
用javascript读取xml文件读取节点数据
2014/08/12 Javascript
JavaScript使用focus()设置焦点失败的解决方法
2014/09/03 Javascript
Javascript中数组sort和reverse用法分析
2014/12/30 Javascript
JavaScript实现算术平方根算法-代码超简单
2015/09/11 Javascript
webpack项目调试以及独立打包配置文件的方法
2018/02/28 Javascript
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
vue短信验证性能优化如何写入localstorage中
2018/04/25 Javascript
vue集成kindeditor富文本的实现示例代码
2019/06/07 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
js实现星星打分效果
2020/07/05 Javascript
[01:15:15]VG VS EG Supermajor小组赛B组胜者组第一轮 BO3第二场 6.2
2018/06/03 DOTA
python MySQLdb Windows下安装教程及问题解决方法
2015/05/09 Python
Python正则表达式和元字符详解
2018/11/29 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
浅谈python已知元素,获取元素索引(numpy,pandas)
2019/11/26 Python
CSS3制作漂亮的照片墙的实现代码
2016/06/08 HTML / CSS
html5小程序飞入购物车(抛物线绘制运动轨迹点)
2020/10/19 HTML / CSS
存储过程的优点有哪些
2012/09/27 面试题
《要下雨了》教学反思
2014/02/17 职场文书
我爱我家教学反思
2014/05/01 职场文书
机械操作工岗位职责
2014/08/08 职场文书
2015年校医个人工作总结
2015/07/24 职场文书
Redis Stream类型的使用详解
2021/11/11 Redis
使用CSS实现黑白格背景效果
2022/06/01 HTML / CSS