vue element-ui el-upload组件 上传图片到阿里云OSS

阿里云那边的配置就先不说了.遇到跨域的问题看这里 https://help.aliyun.com/document_detail/31870.html?spm=a2c4g.11186623.4.1.4fec49e8JjFWF9

直接上代码.

1.下载安装 ali-oss

npm i ali-oss --save

2. 新建一个文件  aliyun.oss.client.js 如下

vue element-ui el-upload组件 上传图片到阿里云OSS_第1张图片

/**
 * 阿里云oss上传工具
 *
 *  @description conf: {
                region: null,
                accessKeyId: null,
                accessKeySecret: null,
                bucket: null,
                stsToken: null
            }

 */
import OSS from 'ali-oss';
export default (conf) => {
    return new OSS(conf);
};

3.组件内部使用 Upload.vue



获取的token.后台返回的数据 如下

 

vue element-ui el-upload组件 上传图片到阿里云OSS_第2张图片

4.图片上传成功回调数据如下 

vue element-ui el-upload组件 上传图片到阿里云OSS_第3张图片

 

 

你可能感兴趣的:(vue图片上传,upload,javascript,图片上传,阿里云OSS,前端,js,javascript,vue,nodejs)