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

首先安装依赖

cnpm install ali-oss

封装client

若是想减小打包后静态资源大小,可在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传入后台返回的阿里数据

结果如下图:

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上传图片到阿里云就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

时间: 2020-08-10

Vue + Element UI图片上传控件使用详解

上一篇 Vue +Element UI +vue-quill-editor 富文本编辑器及插入图片自定义 主要是写了富文本编辑器的自定义及编辑器中图片的上传并插入到编辑内容,这篇文章单独介绍一下element UI 图片上传控件的使用.首先要安装element并中引入,安装引入过程这里不再赘述. 1.引用element 上传控件. <el-upload action="/mgr/common/imgUpload"//这里需要配置一下文件上传地址(跨域) list-type=&qu

vue中实现上传文件给后台实例详解

FormData 对象的使用: 1.用一些键值对来模拟一系列表单控件:即把form中所有表单元素的name与value组装成 一个queryString 2. 异步上传二进制文件. (ps:说白了就是不使用form表单实现form表单提交数据或文件,如果还是不懂,请自行百度) 实现过程 1.使用type类型为file的input框实现选择文件(顺便记录一下修改input框的默认样式) 2.修改input框的默认样式 3.通过选择文件拿到数据 4.请求接口 以上就是本次关于vue中实现上传文件给后

使用Vue实现图片上传的三种方式

项目中需要上传图片可谓是经常遇到的需求,本文将介绍 3 种不同的图片上传方式,在这总结分享一下,有什么建议或者意见,请大家踊跃提出来. 没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务场景.假设我们要做一个后台系统添加商品的页面,有一些商品名称.信息等字段,还有需要上传商品轮播图的需求. 我们就以Vue.Element-ui,封装组件为例子聊聊如何实现这个功能.其他框架或者不用框架实现的思路都差不多,本文主要聊聊实现思路. 1.云储存 常见的 七牛云,OSS(阿里云)等,这些云平

vue+elementUI实现图片上传功能

本文实例为大家分享了vue+elementUI图片上传的具体代码,供大家参考,具体内容如下 1.html <el-form-item label="图片" prop="logo"> <el-upload name="file" v-if="optype==0" :action="'/upload'" accept=".jpg, .png" list-type="

vue实现axios图片上传功能

vue中实现图片上传,我这里使用的是FormData通过axios向后台发送请求,从而实现图片的上传. 在发起请求的axios中一般用qs进行序列化,但是序列化之后,FormData就传送失败,所以要区别传送的数据类型. 经过多次摸索总结了以下经验,以供参考. 首先创建一个文件夹services ,里面有两个文件 index.js 和 api.js. 我们的qs序列化和数据拦截写在index.js中 import axios from "axios"; import config fr

vue项目实现图片上传功能

本文实例为大家分享了vue实现图片上传功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .uploadimg{ width:100px; height:100px; border-r

详解vue 图片上传功能

这次做了vue页面的图片上传功能,不带裁剪功能的! 首先是html代码,在input框上添加change事件,如下: <ul class="clearfix"> <li v-if="imgs.length>0" v-for='(item ,index ) in imgs'> <img :src="item"> </li> <li style="position:relative

vue中利用simplemde实现markdown编辑器(增加图片上传功能)

前言 最近在搭个人博客网站,需要一个 markdown 编辑器,来进行博客的编写 看了网上的教程,决定使用 simplemde 以为可以直接能拿来用的 不过实际运用的时候发现还是有要完善的地方 比如令人头疼的图片上传 最终效果 安装及初始化 npm install simplemde --save 在html中加入一个textarea <textarea id="simplemde"></textarea> 在vue的生命周期函数 mounted 中,添加 si

vue+element实现图片上传及裁剪功能

本文实例为大家分享了vue+element实现图片上传及裁剪的具体代码,供大家参考,具体内容如下 随便写的一个小demo 功能是没有任何问题 可能里面会有一些小细节没有优化 1 .安装 vue-cropper npm install vue-cropper 2.组件内使用 import { VueCropper } from 'vue-cropper' components: { VueCropper, }, 具体可见官网 demo <template> <div> <h1&

Vue2.0 实现移动端图片上传功能

本文主要介绍VUE2.0图片上传功能的实现.原理是通过js控制和input标签的方式完成这一效果,无需加载其他组件. 效果图如下: 1.DOM代码 1.1input标签 由于我们是通过input标签的方式进行图片上传的,但是input标签的样式有点丑,所以我们隐藏该样式display: none <input @change="fileChange($event)" type="file" id="upload_file" multiple

vue实现简单图片上传

本文实例为大家分享了vue实现简单图片上传的具体代码,供大家参考,具体内容如下 功能 实现图片上传 显示进度条 <template> <div class="about"> <div> <div> <img :src="'https://www.xxx.com'+item" alt="" v-for="item in pics" > </div> <

java使用CKEditor实现图片上传功能

java如何使用CKEditor实现图片上传功能,具体内容如下 1.根据实际需要下载指定的CKEditor 2.删除文件ckeditor/plugins/image/dialogs/image.js预览框中文本内容,并修改hidden属性值为显示上传选项卡 删除image.js中包含在双引号中的上述文本 将image.js中的hidden属性值改为0 3.修改ckeditor/config.js文件,配置"上传到服务器"按钮调用的controller接口 4."上传到服务器&

iOS实现压缩图片上传功能

本文实例为大家分享了iOS实现压缩图片上传功能,供大家参考,具体内容如下 #pragma mark - 打开相机 -(void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary<NSString *,id> *)info{ UIImage *image = info[UIImagePickerControllerOriginalImage]; s