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 相关文章推荐
javascript下arguments,caller,callee,call,apply示例及理解
Dec 24 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
Jul 09 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
Jun 26 Javascript
基于js实现二级下拉联动
Dec 17 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
Jan 06 Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 Javascript
node.js学习之断言assert的使用示例
Sep 28 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
Mar 19 Javascript
js数据类型检测总结
Aug 05 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
Nov 01 Javascript
react 项目中引入图片的几种方式
Jun 02 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
PHP数据库万能引擎类adodb配置使用以及实例集锦
2014/06/12 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
Javascript中的五种数据类型详解
2014/12/26 Javascript
谷歌浏览器调试JavaScript小技巧
2014/12/29 Javascript
jQuery中:input选择器用法实例
2015/01/03 Javascript
JavaScript清空数组元素的两种方法简单比较
2015/07/10 Javascript
基于Jquery和html5的7款个性化地图插件
2015/11/17 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
2016/05/05 Javascript
js定义类的几种方法(推荐)
2016/06/08 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
NodeJS测试框架mocha入门教程
2017/03/28 NodeJs
javascript 的变量、作用域和内存问题
2017/04/19 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
[46:20]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第二场 1月22日
2021/03/11 DOTA
python读取LMDB中图像的方法
2018/07/02 Python
浅析python的Lambda表达式
2019/02/27 Python
tensorflow实现tensor中满足某一条件的数值取出组成新的tensor
2020/01/04 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2020/10/19 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
用python对excel进行操作(读,写,修改)
2020/12/25 Python
python中re模块知识点总结
2021/01/17 Python
Hush Puppies澳大利亚官网:舒适的男女休闲和正装鞋
2019/08/24 全球购物
介绍一下MD5加密算法
2016/11/12 面试题
党校培训思想汇报
2013/12/30 职场文书
经贸专业毕业生求职信
2014/03/23 职场文书
中秋节主持词
2014/04/02 职场文书
班级年度安全计划书
2014/05/01 职场文书
大学学雷锋活动总结
2014/06/26 职场文书
观看《筑梦中国》纪录片心得体会
2016/01/18 职场文书
Python面向对象之成员相关知识总结
2021/06/24 Python
使用Python开发冰球小游戏
2022/04/30 Python