首先安裝依賴

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 /></el-upload><el-dialog :visible.sync='dialogVisible'> <img :src='http://www.aoyou183.cn/bcjs/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 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='http://www.aoyou183.cn/bcjs/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上傳圖片到阿里云就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。