element上传图片到服务器_VUE 实现element upload上传图片到阿里云

首先安装依赖

cnpm install ali-oss

封装client

若是想减小打包后静态资源大小，可在index.html引入：(然后在client.js里注释掉const OSS = require(‘ali-oss'))

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部分

action=""

:http-request="Upload"

:data="Aliyun"

:multiple="false"

:show-file-list="true"

list-type="picture-card"

:on-preview="handlePictureCardPreview"

:on-remove="handleRemove"

:limit="5"

>

图片上传限制： 1.最多5张； 2.最大1M

2、JS部分

import { getAliyun, createOrder } from '@/api/order-management'

import { client } from '@/utils/alioss'

export default {

name: 'Appeal',

data() {

return {

dialogImageUrl: '',

dialogVisible: false,

Aliyun: {}, //