圆月山庄资源网 Design By www.vgjia.com
首先安装依赖
cnpm install ali-oss
封装client
若是想减小打包后静态资源大小,可在index.html引入:(然后在client.js里注释掉const OSS = require(‘ali-oss'))
<script src="/UploadFiles/2021-04-02/aliyun-oss-sdk-4.4.4.min.js">
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="/UploadFiles/2021-04-02/dialogImageUrl">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="/UploadFiles/2021-04-02/item.imgUrl">以上这篇VUE 实现element upload上传图片到阿里云就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
圆月山庄资源网 Design By www.vgjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
暂无评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]